Анимация и удаление div-jquery

Question

Анимация и удаление div-jquery

Я удаляю div из тела с эффектом затухания с задержкой.

$('#mydata div').each(function(i) {                 



        $(this).delay(200*i).fadeOut(1000);

            $(this).animate({

                "opacity" : "0",

            });



    });

    $('#mydata').remove();

Но если я использую $('#mydata').удалить () анимацию не работает никаких решений .. ?

557 5

jQuery jquery-ui

5 ответов:

Comments

Ничего не найдено.

yoda · Accepted Answer · 2012-02-29 03:18:35

Что-то вроде этого:

$('#mydata div').each(function(i) {                 

        $(this).delay(200*i).fadeOut(1000);
            $(this).animate({
                "opacity" : "0",
                },{
                "complete" : function() {
                      $('#mydata').remove();
                }
            });

    });

Ben D · Accepted Answer · 2012-02-29 03:18:58

Вам нужно сделать так, чтобы удаление произошло после завершения анимации. Это может быть добавлено в Вызов animate() как параметр on complete (функция, которая будет вызвана, когда анимация закончится):
 $(this).animate({
         "opacity" : "0", //property
         1000, //duration of animation (optional)
         function(){$('#mydata').remove();} //function to run on complete (optional)
 });
Вы можете прочитать больше в jQuery API

msonsona · Accepted Answer · 2012-02-29 03:21:48

Если вы не возражаете против того, чтобы div все еще был в DOM, вы можете скрыть его , что более просто:
$('#mydata').hide();
И вы также можете указать скорость и тип анимации

Tim · Accepted Answer · 2012-02-29 03:27:42

Вы удаляете родительский элемент до того, как дочерние элементы исчезнут.

Попробуйте это:
$('#mydata div').each(function(i) {
    $(this).delay(200*i)
        .fadeOut(1000)
        .animate({
           "opacity" : "0",
        },
        function() {
            $(this).remove();
            if($("#mydata div").length == 0) {
                $("#mydata").remove();
            }
        });
});

PodTech.io · Accepted Answer · 2015-12-30 18:21:22

Небольшой мод на Bens answer работает для меня..
$( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
}, 5000, function() {
      // Animation complete.
});