JQuery slideDowns останавливается при слишком быстром нажатии на клик - PullRequest
Новая
       19

JQuery slideDowns останавливается при слишком быстром нажатии на клик

0 голосов
/ 27 марта 2012

У меня есть список элементов, которые пользователь может добавить, нажав кнопку «Добавить». Он добавляет новый элемент div вверху списка, который скользит вниз ($ (). SlideDown ();) JQuery. Проблема в том, что если пользователь слишком быстро нажимает кнопку добавления, слайд останавливается и никогда не заканчивается.

Вот краткий пример того, что я делаю: http://jsfiddle.net/2RqmU/44/ очень быстро нажмите "Нажмите здесь".

Как я могу убедиться, что анимация не останавливается, или, по крайней мере, отключить клик до завершения анимации?

Ответы [ 3 ]

1 голос
/ 27 марта 2012

Вы меняете все содержимое цели 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++;
});​

см. Обновленную скрипку .

1 голос
/ 27 марта 2012

Красиво и чисто!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;
}
1 голос
/ 27 марта 2012

Просто небольшое изменение, но это сработает 

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