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

jQuery animate dynamic elements one at a time

本文关键字：动态 元素 动画 一个 设置 一次 jQuery      更新时间：2023-09-26

让我在前面说，我已经解决了这个线程，试图解决我的问题，但没有成功：每个元素中的淡入-一个接一个

我认为如果元素不是动态内容，它会很容易工作，但我做了一个测试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函数移动到axax.done（）函数。

我真的不知道怎样才能优雅地做这件事。如果我能提供任何其他细节，请告诉我。

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

在写这个问题的过程中，我提出了以下解决方案，看起来效果很好：

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()函数，并将其设置为超时值，该超时值等于我必须淡入的子元素数乘以动画持续时间，并留有一点回旋余地。

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

在动画完成之前，您不想调用.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>

相关文章：