jquery - mouseleave 上的 jQuery animate() 回调不会触发

Question

我有一个两步动画，它在 mouseenter 上触发一次，在 mouseleave 上触发一次。

如果我只有一个元素，那效果很好，但如果我有多个元素并且从一个元素悬停到另一个元素，则 animate() 的回调不会触发，这会打乱动画。

$('#userIndex .item').mouseenter(function() {
    $this = $(this).find('.inner');     
    $this.animate({
       'opacity': '0.1'
    }, 100, 'linear', function(){
      $this.find('.front').hide();
      $this.find('.back').show();      
      $this.animate({
        'opacity': '1'
      }, 100);
    });
  }).mouseleave(function() {
    $this = $(this).find('.inner');
    $this.animate({
      'opacity': '0.1'
    }, 100, 'linear', function(){
      $this.find('.back').hide();
      $this.find('.front').show();
      $this.animate({
        'opacity': '1'
      }, 100);
    });
  });

示例：http: //jsfiddle.net/3KuxS/

Answer 1

看起来像一个简单的范围问题。

jsFiddle 示例

改变：

$this = $(this).find('.inner');

到

var  $this = $(this).find('.inner');