当点击过快时，JQuery slideDowns 停止

Question

我有一个用户可以通过单击“添加”按钮添加到的项目列表。它在列表顶部添加了一个新的 div，它向下滑动（JQuery 的 $().slideDown();）。问题是，如果用户点击添加按钮的速度过快，幻灯片就会停止并且永远不会结束。

这是我正在做的一个简短示例：http://jsfiddle.net/2RqmU/44/ 点击“点击这里”非常快。

如何确保动画不会停止，或者至少在动画完成之前禁用 onclick？

Answer 1

您每次点击都会更改目标div 的全部内容。相反，您可以只附加/前置单个元素。这解决了你的动画问题：

var id = 0;

//click
$("#clickme").click(function() {
    //Add a new div on top in content
    var pre = "<div id='foo" + id + "' class='dynamicdiv'>hello " + id + "</div>";
    $("#content").prepend(pre);

    //Slide it down and update ID
    $("#foo" + id).slideDown(300);
    id++;
});​

查看更新后的fiddle。

Answer 2

只是一点点改变，但会奏效

var id = 0;

$("#clickme").click(function() {
    //Add a new div on top in content
    $("#content").prepend("<div id='foo" + id + "' class='dynamicdiv'>hello " + id + "</div>");

    //Slide it down and update ID
    $("#foo" + id).slideDown(300);
    id++;
});​

Answer 3

又好又干净！ http://jsfiddle.net/2RqmU/59/

最终版本：

HTML

<div id="clickme">CLICK HERE</div>
<div id="content">            
</div>

JavaScript

var id = 0;

//click
$("#clickme").click(function() {
    //Add a new div on top in content
    $('<div/>')
        .attr({
            "id" : "foo" + id                
        })
        .addClass("dynamicdiv")
        .html("Hello " + id)
        .prependTo('#content')
        .slideDown(300);

    id++;
});

CSS

div#clickme {
    background-color: #5e1d1d;
    color: #FFFFFF;
    font-family: verdana;
    font-size: 18px;
}

.dynamicdiv {
    background-color: #5c8591;
    border-bottom: 1px solid #FFFFFF;
    display: none;
    font-family: verdana;
    font-size: 18px;
}