onclick을 너무 빠르게 클릭하면 JQuery slideDowns가 중지됩니다.

Question

"추가"버튼을 클릭하여 사용자가 추가 할 수있는 항목 목록이 있습니다. 목록 위쪽에 새로운 div가 추가됩니다 (JQuery의 $(). slideDown();). 문제는 사용자가 추가 버튼을 너무 빨리 누르면 슬라이드가 멈추고 끝나지 않는다는 것입니다.

다음은 내가하는 일에 대한 간단한 예입니다. http://jsfiddle.net/2RqmU/44/ "여기를 클릭하십시오."를 클릭하십시오.

애니메이션이 끝나지 않거나 적어도 애니메이션이 끝날 때까지 onclick을 사용 중지하지 않도록하려면 어떻게해야합니까?

Answer 1

작동합니다. 대신 개별 요소를 추가/앞에 추가 할 수 있습니다.

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

그냥 약간의 변화하지만 당신은 클릭 할 때마다의 대상 div의 전체 내용을 변경하고

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> 

자바 스크립트

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