Question

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

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

如何确保动画不会停止，或至少禁用onclick直到动画完成？

Answer 1

稍作修改，但这样可行

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 2

您在每次点击时都会更改目标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 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;
}

当单击onclick太快时，JQuery slideDowns停止

3 个答案: