使用JQuery冻结CSS3过渡

Question

I am trying to create a jquery plugin that zoom the background image of a div when its hovered. However, i'm having a very strange glitch. It works fine and smooth, but when the div is clicked, the CSS3 transition starts to freeze. I've made a codepen example.

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

EDIT: I tryed the first Answer but it didn't work. I've changed de code and the codepen example for better demonstration.

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 + '%',
  });
});

I don't know what is wrong, any help apreciated

Answer 1

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

Don't call mouse events inside mouse events, that'll mess things up. Use separate handlers instead.

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