jQuery slideup制作多张幻灯片

Question

我希望使用jQuery将一个元素滑下，等待，然后再滑回。

当我使用下面的代码时，它可以很好地滑下，但当滑回时，它似乎会上下滑动多次。

HTML：

<div id="area">
    <div id="summary"><p>hello summary</p></div>
    <div id="dropdown">
        <div class="item"><p>hello item</p></div>
        <div id="functions"><p>hello functions</p></div>
    </div>
</div>

<p><a href="#" id="test_add">TEST ADD</a></p>

jQuery：

$("document").ready( function () {
    $("#test_add").bind("click", add_item_annimate)
})

function add_item_annimate() {
     $("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}

我不太确定为什么会发生这种情况。

Answer 1

这可能是因为动画队列，为了清除它，你可以使用stop方法：

$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");

Answer 2

这段代码应该可以解决这个问题！

$("document").ready( function () {
            $("#test_add").click( function(){
                $("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
                 //SlideUp and slideDown can be switched.   
            });
            });

示例：http://jsfiddle.net/xcm8n1s3/

Answer 3

你没有任何东西阻止用户在动画完成之前多次点击"TEST ADD“。

if ($("#dropdown").is(':animated')) {
    return false;
}

$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");

这是一个工作演示的jsfiddle。