Jquery 防止重复动画而不破坏我的下拉列表?
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以使用
toggle
值作为height
参数。您还允许用户通过再次单击动画来中断动画(
.stop()
部分)。如果在动画过程中我中断它(假设他的高度为 50%),那么在下一次调用中,我的动画将从 50% 变为 0。我的下一个将从 0 变为 50%。
停止文档指出您可以指定是否清除队列和/或转到末尾的动画。这些是你的案例。
请注意添加到停靠点的两个
true
值。这应该有效。You use the
toggle
value to theheight
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.
Notice the two
true
values added to the stop. This should work.