在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 example

變化：

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

到

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