jQuery 一次一个地为动态元素设置动画答案

【问题标题】：jQuery animate dynamic elements one at a timejQuery 一次一个地为动态元素设置动画
【发布时间】：2015-07-16 02:24:39
【问题描述】：

让我先说我已经解决了这个线程，试图解决我的问题，但无济于事： Fade in each element - one after another

我认为如果元素不是动态内容，它会很方便地工作，但我制作了一个测试 div 并用缩略图填充它，以及一个用于单击的按钮并分配了类似的代码，但它仍然完全删除了所有没有动画或犹豫的元素。

现在，我的样子是这样的：

         function OnThumbSuccess(response) {
            var $thumbs = $('#Gallery .thumbWindow .thumbReel');
            var files = $.parseJSON(response.d);

            $thumbs.children().each(function (i) {
                $(this).delay(i*300).animate({ 'opacity': '0' }, 500, 'easeOutSine');
                $(this).remove();
            })

            //make sure the thumb reel resets to its original position
            $thumbs.css('left', '0px');

            //loop through the array of json objects
            for (var i = 0; i < files.length; i++) {
                //images[i] = files[i].fileHREF;
                InsertHTML(files[i].thumbHref, i);
            }
        }

所以，它应该淡出该元素，然后将其删除。删除它没有问题；这是它似乎失败的动画。

经过一番修改，我发现我确实可以为它们制作动画，只要我摆脱 $(this).remove() 即可。如果我不需要摆脱这些元素，那就没问题了。

我做什么似乎并不重要。我尝试将.remove() 链接到 animate 函数的末尾，我尝试在清空 div 之前将延迟设置为等于元素数量。我尝试将代码移动以将缩略图 div 从 OnThumbSuccess 函数填充到 ajax.done() 函数。

我真的不知道如何优雅地做到这一点。如果我可以提供任何其他详细信息，请告诉我。

我做了这个测试小提琴，也许这会有所帮助：http://jsfiddle.net/kum8d7k9/

【问题讨论】：

是的，我们已经解决了这个问题
太棒了！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

标签： javascript jquery html css animation

【解决方案1】：

嗯，在写这个问题的过程中，我想出了以下解决方案，似乎效果很好：

function GetThumbnails(category) {
            $.ajax({
                type: "POST",
                url: "Filenames.asmx/GetFiles",
                contentType: "application/json; charset=utf-8",
                data: '{ "folderName" : "' + category + '"}',
                dataType: "json",
                success: OnThumbSuccess,
                failure: function (response) {
                    alert('failure');
                }
            }).done(function (response) {
                //alert(response.d);
                var files = $.parseJSON(response.d);
                var $thumbs = $('#Gallery .thumbWindow .thumbReel');
                if ($thumbs.children().length > 0) {
                    setTimeout(function () {
                        $thumbs.empty();
                        //loop through the array of json objects
                        for (var i = 0; i < files.length; i++) {
                            //images[i] = files[i].fileHREF;
                            InsertHTML(files[i].thumbHref, i);
                        }
                    }, $thumbs.children().length * 300);
                }
                else {
                    //loop through the array of json objects
                    for (var i = 0; i < files.length; i++) {
                        //images[i] = files[i].fileHREF;
                        InsertHTML(files[i].thumbHref, i);
                    }
                }
            }).fail(function (response) {
                alert(response.responseText);
            });
        }
        function OnThumbSuccess(response) {
            var $thumbs = $('#Gallery .thumbWindow .thumbReel');


            $thumbs.children().each(function (i) {
                $(this).delay(i*200).animate({ 'opacity': '0'}, 200, 'easeOutSine');
            })
            //make sure the thumb reel resets to its original position
            $thumbs.css('left', '0px');

        }

我已将.empty() 函数移至$.ajax.done() 函数，并在其上设置了一个超时值，该超时值等于我必须淡出的子元素数量乘以动画持续时间，并留有一点回旋余地。

接下来我必须想出一种方法来转换这些元素。这是最具教育意义的，但如果有人有更好的解决方案，我会全力以赴。

【讨论】：

bleh，感觉就像是一个不体面的 hacking-at-it-until-it-works 解决方案。

【解决方案2】：

你不想在动画完成之前调用.remove()，所以你需要使用jQuery animate的完整回调函数http://api.jquery.com/animate/。

$(this).delay(i*300).animate({ 'opacity': '0' }, 500, 'easeOutSine',   
   function() {
       $(this).remove();
   }
);

链接不起作用，因为 animate 函数会立即返回，而不是在动画完成后返回。

$('#remove_me').animate({
  opacity: 0
}, 500, function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="remove_me">testing remove</div>

【讨论】：