使用JQuery冻结CSS3转换

Question

我正试图创建一个jquery插件，在div悬停时缩放其背景图像。然而，我遇到了一个非常奇怪的故障。它工作得很好，很平滑，但当单击div时，CSS3转换开始冻结。我做了一个代码笔的例子。

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

编辑：我尝试了第一个答案，但没有成功。为了更好地演示，我更改了decode和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 + '%',
  });
});

我不知道出了什么问题，任何帮助都会导致

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;
});