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

发布于 2024-08-10 19:09:12 字数 1335 浏览 4 评论 0原文

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);  
};

幻灯片功能按照我想要的方式工作,但下拉菜单没有(如前所述中断)并且由于某种原因我的切换类也无法工作(但它在旧版本上)

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

In an attempt to solve the animation queing in the old version (menu7.html) I tried using .stop() in the dropdown menu.
Problem is when you "stop" the dropdown halfway through and then start it again, it breaks the menu and only extends back to where it stopped :/

I'm pretty sure this is really simple, but how can I fix this?

$(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);  
};

the slide function works how I want it to, but the dropdown doesn't (breaks as stated earlier) and for some reason my toggleclass isn't working either (but it is on the old version)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

昔梦 2024-08-17 19:09:12

您可以使用 toggle 值作为 height 参数。
您还允许用户通过再次单击动画来中断动画(.stop() 部分)。

如果在动画过程中我中断它(假设他的高度为 50%),那么在下一次调用中,我的动画将从 50% 变为 0。我的下一个将从 0 变为 50%。

停止文档指出您可以指定是否清除队列和/或转到末尾的动画。这些是你的案例。

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

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

You use the toggle value to the height parameter.
You also allow the user to interrupt the animation by clicking it again (the .stop() part).

If during animation I interrupt it (let's say to his 50% of height), in the next call my animate will go from 50% to 0. My next one will go from 0 to 50%.

Stop documentation points out that you can specify wether to clear the queue and/or to goto the end of the animations. These are your cases.

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

Notice the two true values added to the stop. This should work.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文