使用JQuery

Question

我正在尝试创建一个jquery插件，用于在div悬停时缩放div的背景图像。 但是，我有一个非常奇怪的故障。它工作正常，但是当单击div时，CSS3转换开始冻结。 我做了一个codepen示例。

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

编辑：我尝试了第一个答案，但它没有用。我已经更改了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 + '%',
  });
});

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

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