jQuery动画无需排队 [英] jQuery animation without queuing

问题描述

我试图弄清楚.stop()和clearQueue()的工作方式. 这是我在jsfiddle中的示例代码: http://jsfiddle.net/PsTQv/1/ 如果将鼠标悬停在几个块上，您将看到动画正在排队. 为了解决这个问题，我尝试使用stop()和clearQueue.在hide()或show()之后添加简单的stop或两者都不起作用.

I am trying to figure out how .stop() and clearQueue() work. Here is my sample code in jsfiddle: http://jsfiddle.net/PsTQv/1/ You will see the animation is queuing if hove over several blocks. To work around with this, I tried to use stop() and clearQueue.Simple add stop after hide() or show() or both won't work.The behaviors like:

1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()

我想了解clearQueue和stop之间的区别，以解释上述行为.在此示例中，我想弄清楚如何在不排队的情况下实现动画，即，将鼠标悬停在块上，文本显示在幻灯片效果.

I want to understand what the differences between clearQueue and stop to explain the behaviors above.Also I want to figure out how to achieve the animation without queueing in this example, that is, hover over the block and the text shows up in the slide effect.

谢谢

推荐答案

您需要清除动画队列:

$('.block').hover(function(){
    $('section').hide('fast');
    //$('section').stop().show('slide',{direction:'left'},1000);
    $('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});

jsFiddle

这篇关于jQuery动画无需排队的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！