Question

http://mmowned.org/dragon/slm/menu9.html

为了解决旧版本（menu7.html）中的动画排队问题，我尝试在下拉菜单中使用.stop（）。问题是，当你“停止”中途下拉菜单然后再次启动它时，它会中断菜单并且只会延伸到停止的位置：/

我很确定这很简单，但我该如何解决这个问题呢？

$(document).ready(function() {  
    var nid=["bottom","nav","news","wow","emu","war","aoc","diablo","prog","trade"];  
    $('li.navhead2').click(function () {  
    var id = $(this).attr('id')  
    var query = jQuery.inArray(id, nid)  
    if (query !== -1 && query !== 0)  
    {  
       $("#menu"+query).slideFadeToggle('slow');  
        if (query !== 1 && query !== 0)  
        {  
        $(this).toggleClass("clicked");  
        }  
        else  
        {  
        $(this).toggleClass("clicked1");  
        }  
    }  
    else if (query === 0)  
    {
    $("[id^=menu]").not("#menu1").slideUp('fast');  
    $("li.navhead2").removeClass("clicked");  
    }  
    });   
 slide("#sliding-navigation", 160, 182, 150, .8);  
  });

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {  
    return this.stop().animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);  
};

幻灯片功能按我想要的方式工作，但是下拉列表没有（如前所述中断）并且由于某种原因我的toggleclass也没有工作（但它是旧版本）

Answer 1

您将toggle值用于height参数您还允许用户通过再次单击动画来中断动画（.stop()部分）。

如果在动画期间我打断它（让我们说他的高度的50％），在下一次调用中，我的动画将从50％变为0.我的下一个将从0到50％。

Stop documentation指出您可以指定清除队列和/或转到动画的结尾。这些是你的情况。

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {  
    return this.stop(true,true).animate({opacity: 'toggle', height: 'toggle', queue:false}, speed, easing, callback);  
};

请注意添加到停靠点的两个true值。这应该有用。

Jquery防止重复动画而不破坏我的下拉列表？

1 个答案: