CSS3过渡与JQuery冻结

Question

我想创建一个jquery插件，它放大后缩放div的背景图像。 但是，我有一个非常奇怪的故障。它工作正常，顺利，但当div被点击时，CSS3转换开始冻结。 我做了一个codepen示例。

http://codepen.io/maxjf1/pen/rLKOPb

编辑：我tryed第一个答案，但没有奏效。我已更改de code以及更好演示的codepen示例。

var smooth = 'all 200ms ease-out'; 
$("[up-background-zoom]").hover(function() { 
    debug = true; 
    $(this).css({ 
    'background-size': 'inherit', 
    'cursor': 'zoom-in', 
    'border': '1px solid rgba(0, 0, 0, 0.15)', 
    'box-sizing': 'border-box', 
    'transition': smooth 
    }); 
}, function() { 
    $(this).css({ 
    'background-size': '', 
    'background-position': '', 
    'cursor': '', 
    'border': '', 
    'box-sizing': '', 
    'transition': '' 
    }); 
}); 
$("[up-background-zoom]").mousemove(function(e) { 
    var parentOffset = $(this).parent().offset(); 
    var parentOffset = $(this).offset(); 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 
    var divw = $(this).innerWidth(); 
    var divh = $(this).innerHeight(); 
    var posX = ((100/divw) * relX).toFixed(3); 
    var posY = ((100/divh) * relY).toFixed(3); 
    if (debug) $(this).html('<pre>' + posX + '%<br>' + posY + '%</pre>'); 
    $(this).css({ 
    'background-position': posX + '% ' + posY + '%', 
    }); 
}); 

我不知道什么是错的，任何帮助apreciated

Answer 1

http://codepen.io/anon/pen/pbKgAz

不要叫里面的鼠标事件鼠标事件，那会误事。改用单独的处理程序。

var debug = true, 
    hovered = false, 
    smooth = 'all 0.1s ease-out', 
    el = $("[up-background-zoom]"); 

el.mousemove(function(e) { 
    var $this = $(this), 
    parentOffset = $this.offset(), 
    relX = e.pageX - parentOffset.left, 
    relY = e.pageY - parentOffset.top, 
    divw = $this.innerWidth(), 
    divh = $this.innerHeight(), 
    posX = ((100/divw) * relX).toFixed(1), 
    posY = ((100/divh) * relY).toFixed(1); 

    if (debug) $this.html('<pre>' + posX + '%<br>' + posY + '%</pre>'); 

    $this.css({ 
    'background-position': posX + '% ' + posY + '%', 
    }); 
}) 

el.on('click', function(e) { 
    if (hovered) { 
    console.log(this); 
    e.preventDefault(); 
    } 
}); 

el.hover(function() { 
    $(this).css({ 
    'background-size': 'inherit', 
    'cursor': 'zoom-in', 
    'border': '1px solid rgba(0, 0, 0, 0.15)', 
    'box-sizing': 'border-box', 
    'transition': smooth 
    }); 
    hovered = true; 
}, function() { 
    $(this).css({ 
    'background-size': '', 
    'background-position': '', 
    'cursor': '', 
    'border': '', 
    'box-sizing': '', 
    'transition': '' 
    }); 
    hovered = false; 
});