懸停時jQuery不完整的動畫

Question

我正在為我的網站開發導航系統。 想法是在懸停父母時顯示內容。

但是，當內容快速懸停時，動畫是不完整的，並且在兩者之間停止。

完整的工作和代碼在下面的演示鏈接中。 關於更改代碼的任何建議將很有幫助。

演示： http : //jsfiddle.net/vaakash/yH9GE/

當同時懸停“兩個”箭頭（從一個箭頭快速移動到另一個箭頭）時，它們停止並且不完整

我使用的代碼是

$('.anpn-wrap').mouseenter(function(){           

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $txt.hide();
    $cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
    $wrap.stop().animate({ 'width': $cnt.outerWidth() });
    $cnt.show().animate({ 'opacity': 1, 'margin': 0});

});

$('.anpn-wrap').mouseleave(function(){

    $wrap = $(this);
    $txt = $(this).find('.anpn-text');
    $cnt = $(this).find('.anpn-cnt');

    $cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
        $cnt.hide();
        $wrap.stop().animate({ 'width': $txt.outerWidth() });
        $txt.fadeIn();
    });

});​

Answer 1

通過不本地化$wrap ， $txt和$cnt ，它們將是全局的，因此，如果在更早的mouseleave動畫完成之前發生mousenter事件，則這些var將被覆蓋，並且第一個動畫中的回調將解決另一個按鈕的元素。

解決方案是在兩個處理程序中都用var聲明$wrap ， $txt和$cnt 。

嘗試這個：

$('.anpn-wrap').mouseenter(function() {
    var $wrap = $(this).stop();
    var $txt = $wrap.find('.anpn-text').hide();
    var $cnt = $wrap.find('.anpn-cnt').css({
        'opacity': 0,
        'margin-top': '-50px',
        'width': '200px'
    }).show().animate({
        'opacity': 1,
        'margin': 0
    });
    $wrap.animate({
        'width': $cnt.outerWidth()
    });
}).mouseleave(function() {
    var $wrap = $(this);
    var $txt = $wrap.find('.anpn-text');
    var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
        'opacity': 0,
        'margin-top': '-50px'
    }, function() {
        $cnt.hide();
        $wrap.stop().animate({
            'width': $txt.outerWidth()
        });
        $txt.fadeIn();
    });
});

Answer 2

我不知道您想要什么，但是您可以將參數傳遞給stop()以強制完成動畫。

stop(true, true)

查看此版本： http : //jsfiddle.net/yH9GE/2/