Применяйте анимацию к функциям Clone и Remove - PullRequest
Новая
       2

Применяйте анимацию к функциям Clone и Remove

1 голос
/ 12 января 2011

На моей странице есть функции клонирования и удаления, к которым я хочу применить анимацию slideDown / slideUp соответственно: 

$('#add-item').click(function(){
    var divCloned = $('.form-fields:first').clone();
    divCloned.insertAfter('.form-fields:last');
    return false;
});

$('.remove').live('click', function(){
    if(confirm("Are you sure you wish to remove this item?"))
    {
        $(this).parent().remove();
    }
    return false;
});

Я пытался сделать это, но либо это не работает, либо анимация очень резкая. Кто-нибудь знает, как это можно сделать?

1 Ответ

5 голосов
/ 12 января 2011

для клонирования 

$('#add-item').click(function(){
    var divCloned = $('.form-fields:first').clone();
    // first we hide it (set display to none), then we add it in the DOM 
    // and lastly we aninmate it with slideDown
    divCloned.hide().insertAfter('.form-fields:last').slideDown('fast');
    return false;
});

и для удаления 

$('.remove').live('click', function(){
    if(confirm("Are you sure you wish to remove this item?"))
    {
        // we use the callback method of the slideUp function
        // so that the removal happens after the animation..
        $(this).parent().slideUp('fast',function(){ $(this).remove(); });
    }
    return false;
});

Демо на http://www.jsfiddle.net/gaby/qf4j3/

...