動畫完成後未隱藏的元素

Question

我不能爲了我的生活找出爲什麼我運行的這個函數沒有隱藏元素。當將鼠標懸停在列表項上時，我想讓它內部的兩個div動畫爲49%高度，當鼠標離開此列表項時，它們將返回0並再次獲得display: none;。但是，即使animate的回調函數中的語句執行，它們仍然保持在display: block;。

這裏是什麼樣子時，他們的動畫到49%，如：

而這裏的時候，他們回去0：

包含兩個div元素出於某種原因，回調中的圖像不會隱藏回調函數.hide()。

這是行不通的功能：

$('#site-wrapper').on('mouseenter', '#images-list li', function() { 

    $(this).children('div').show().stop().animate({height: '49%'}, 'fast'); 
}).on('mouseleave', '#images-list li', function() { 

    $(this).children('div').stop().animate({height: 0}, 'fast', function() { 
     $(this).children('div').hide(); 
    }); 
}); 

此解決方案的作品，但它隱藏它馬上在用戶不能夠看到動畫，這是我不想：

$('#site-wrapper').on('mouseenter', '#images-list li', function() { 

    $(this).children('div').show().stop().animate({height: '49%'}, 'fast'); 
}).on('mouseleave', '#images-list li', function() { 

    $(this).children('div').stop().animate({height: 0}, 'fast').hide(); 
}); 

我應該怎麼做才能解決這個相當愚蠢的錯誤？

Answer 1

從文檔上.animate()（重點煤礦）

功能齊全

如果提供完整的回調函數一旦 動畫完成，就會啓動。這對於按順序串聯不同的 動畫非常有用。該回調沒有發送任何 自變量，但this被設置爲正在動畫的DOM元素。

所以不是

... 
.on('mouseleave', '#images-list li', function() { 
    $(this).children('div').stop().animate({height: 0}, 'fast', function() { 
     $(this).children('div').hide(); // Wrong line 
    }); 
}); 

應該

... 
.on('mouseleave', '#images-list li', function() { 
    $(this).children('div').stop().animate({height: 0}, 'fast', function() { 
     $(this).hide(); // Hide the same div that was animated 
    }); 
}); 

Answer 2

你能試試嗎？這將是更好地使用小提琴證明這一點：

$('#site-wrapper').on('mouseenter', '#images-list li', function() { 
    $this = $(this); 
    $this.children('div').show().stop().animate({height: '49%'}, 'fast'); 
}).on('mouseleave', '#images-list li', function() { 
    $this.children('div').stop().animate({height: 0}, 'fast', function() { 
     $this.children('div').hide(); 
    }); 
});