單擊onclick時JQuery slideDowns停止太快

我有一個用戶可以通過單擊「添加」按鈕添加的項目列表。它在列表頂部添加了一個新的div，該列表向下滑動（JQuery的$（）。slideDown（）;）。問題是，如果用戶點擊添加按鈕的速度太快，幻燈片停止並且永遠不會結束。單擊onclick時JQuery slideDowns停止太快

下面是我正在做的一個簡短的例子：http://jsfiddle.net/2RqmU/44/點擊「點擊這裏」真的很快。

如何確保動畫不會停止，或者至少在動畫完成之前禁用onclick？

來源

2012-03-27 Sebastian

你就不能改了slideDown延遲爲100ms？使用你的JSFiddle：http://jsfiddle.net/2RqmU/46/ – mattytommo 2012-03-27 10:16:32

你改變每次點擊目標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。

來源

2012-03-27 10:21:58

謝謝你我的英雄 - 我知道我在做什麼感覺很奇怪。 – Sebastian 2012-03-27 10:26:50

解釋發生了什麼問題。 'var pre = $（「＃content」）。html（）;' 在這個精確的半動畫時刻抓取內容的快照。然後你重新插入它作爲新的內容，凍結它的地方。 – trapper 2012-03-27 10:32:25

只是一個小變化，但將工作

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++; 
});

來源

2012-03-27 10:21:09

如果你想讓它們進入順序，只需將$（「＃content」）前置到$（「＃content」）。append – 2012-03-27 10:22:08

乾淨又幹淨！ 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; 
}

來源

2012-03-27 10:34:32 PapaSmurf

修了 - http://jsfiddle.net/2RqmU/60/ – PapaSmurf 2012-03-27 10:38:49

噢，很好，那很乾淨！我昨天剛剛開始使用JQuery，所以我仍然在學習所有這些。這對於知道你可以很容易地格式化很有幫助 – Sebastian 2012-03-27 10:39:20

我很高興能提供幫助！最終修訂 - http://jsfiddle.net/2RqmU/61/：P. – PapaSmurf 2012-03-27 10:46:22

單擊onclick時JQuery slideDowns停止太快

回答

相關問題