Question

我知道每当你在jquery中调用动画时，有一种方法可以阻止代码循环但是对于我的生活我无法找到它！

如果我按下多个按钮，我怎么能在下面转动这个代码才能不循环？

$('#message-box').slideDown('slow').delay(10000).slideUp('slow');

如果我按下不止一次调用的按钮，它会向下滑动，显示10秒，然后再向上滑动，然后再向下滑动。

我想要它做的是如果它已经失效并按下按钮然后不再次显示它。或者，如果没有别的，请向上滑动当前消息并向下滑动新消息然后在那之间没有延迟。

任何帮助都会很棒！

大卫

Answer 1

这将在运行函数之前检查消息元素是否已经被动画化。

$('#btn').click(function () {
    if (!$('#message-box').is(':animated')) {
        $('#message-box').slideDown('slow').delay(10000).slideUp('slow')
    }
});

Answer 2

如果您只希望事件发生一次，则最简单的方法是一（）

http://api.jquery.com/one/

$('#myButton').one('click', function(){
    $('#message-box').slideDown('slow').delay(10000).slideUp('slow');
})

Answer 3

查看“.one”

http://api.jquery.com/one/

Answer 4

你可以试试这个：

$('#message-box').stop(true,true).slideDown('slow').delay(10000).slideUp('slow');

如果元素中已经存在向下延迟动画，则.stop(true)将停止该动画，清除元素的动画队列，然后才重新排队向下延迟的事物。

演示：http://jsfiddle.net/bSeE7/

Answer 5

$('#message-box').slideDown('slow', function(){
$('#message-box').delay(10000).slideUp('slow');
})

Answer 6

您需要一个条件来防止它在运行时被激活。回调函数将重置布尔值，以允许您在动画结束时再次单击它。

var animationRunning = false;

if(!animationRunning) {
    $('#message-box').slideDown('slow')
                     .delay(10000)
                     .slideUp('slow', function() { animationRunning = false; });

    animationRunning = true;
}

Answer 7

使用.stop（）是明显的答案，但是当与.slideUp（）一起使用时，只要调用.stop（），就会显示一小部分高度。您可以使用.stop(true,true)，但这会导致幻灯片动画“jumptoend”导致动画不稳定。不理想。

考虑使用.animate()代替.slideUp（）

Fiddle

$('button').click(function() {
    $('#message-box').stop(true).animate({height: 100}).delay(1000).animate({height: 0});
});

如果多次按下按钮，则jquery停止滑动延迟

7 个答案: