在当前触发期间停止 jQuery 事件触发?
我对此感到非常恼火!基本上,我有一个 div,它最终会有一个小菜单,当您将鼠标悬停在不同的 div 上时,这个小 div 会向下移动到视图中并变得可见(鼠标移开会导致相反的情况)。
这一切都工作得很好,除了如果我鼠标悬停和鼠标移出速度非常快,我会闪烁(我认为 jQuery 队列正在赶上)。
那么基本上,有没有办法阻止这种情况发生呢?你能告诉 jQuery 类似“此时,在当前队列完成之前不要排队任何其他内容”吗?
我对 jQuery 还比较陌生。下面的代码在我看来应该可以工作,但似乎并没有停止队列添加!请原谅在这种情况下完全不必要地愚蠢地使用 x++/y++,这只是我在此处发布之前尝试的最后一件事。
有人能帮忙吗?
var x = 0;
var y = 0;
function hideme()
{
if (x == 0 && y == 0)
{
x++;
$(unimenu).fadeOut('slow');
$(unimenu).animate({top: "-40px" }, {queue: false, duration: 'slow'});
x = 0;
}
}
function showme()
{
if (y == 0 && x == 0)
{
y++
$(unimenu).fadeIn('slow');
$(unimenu).animate({top: "40px" }, {queue: false, duration: 'slow'});
y = 0;
}
}
I am getting really annoyed at this! Basically, I have a div which will eventually have a small menu, and when you mouseover a different div, this little div moves down into view and becomes visible (mouseout causes the opposite).
This all works very nicely except that if I mouseover and mouseout very fast, I get flashing (the jQuery queue catching up, I assume).
So basically, is there a way to stop this from happening? Can you tell jQuery something like "at this point in time, do not queue anything else until current queue has finished"?
I'm still relatively new to jQuery. My code below looks to me like it should work but doesn't seem to stop queue-adding! Please forgive the stupid use of x++/y++ totally unnecessarily in this situation, it was just the last thing I tried before posting here.
Anyone able to help?
var x = 0;
var y = 0;
function hideme()
{
if (x == 0 && y == 0)
{
x++;
$(unimenu).fadeOut('slow');
$(unimenu).animate({top: "-40px" }, {queue: false, duration: 'slow'});
x = 0;
}
}
function showme()
{
if (y == 0 && x == 0)
{
y++
$(unimenu).fadeIn('slow');
$(unimenu).animate({top: "40px" }, {queue: false, duration: 'slow'});
y = 0;
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我认为您正在寻找的是
停止
。stop
将停止之前的动画。如果您在开始下一个动画之前停止上一个动画,则可以避免排队大量导致问题的动画。http://api.jquery.com/stop/
您提到了 jquery 悬停页面上的演示的问题。请参阅该演示的修改版本并停止。请注意它如何没有问题:
http://jsfiddle.net/WskXt/
I think what you're looking for is
stop
.stop
will stop previous animations. If you stop previous animations before starting the next, you avoid queueing up tons of animations that are causing your issue.http://api.jquery.com/stop/
You mentioned the demo on the jquery hover page having the issue. See this modified version of that demo with stop. Notice how it does not have the issue:
http://jsfiddle.net/WskXt/
不,您不能延迟事件,因为这些事件是由浏览器而不是 jquery 引发的。相反,您可以使用
queue
属性将动画放入队列中。队列只会在前一个动画完成后运行动画。在此页面中搜索
队列
:http://api.jquery.com/animate/< /a>no, you cannot delay the events because those are raised by the browser, not jquery. instead, you can put the animations into a queue using the
queue
property. the queue will only run an animation after the previous animation has completed.Search this page for
queue
: http://api.jquery.com/animate/也许看看hoverIntent插件。 http://cherne.net/brian/resources/jquery.hoverIntent.html
Maybe look into the hoverIntent plugin. http://cherne.net/brian/resources/jquery.hoverIntent.html