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

你没有任何阻止用户点击＆＃34; TEST ADD＆＃34;动画完成前多次。

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

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

以下是工作演示的jsfiddle。

jQuery slideup导致多个幻灯片

3 个答案: