jQuery animate dynamic elements one at a time

Question

Let me preface this by saying I have addressed this thread trying to resolve my issue, but to no avail: Fade in each element - one after another

I thought it would work quite handily if the elements weren't dynamic content, but I made a test div and filled it with thumbnails, and a button to click and assigned similar code, but it still just flat out removed all of the elements without animation or hesitation.

Right now, what I have looks like this:

         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);
            }
        }

So, it's supposed to fade that element out, then remove it. It has no problem removing it; it's the animating it that it seems to fail on.

After some tinkering around, I have discovered that I CAN indeed animate them however I please, provided I get rid of $(this).remove(). That would be fine, if I didn't need to get rid of those elements.

It doesn't seem to matter what I do. I've tried chaining the .remove() to the end of the animate function, I've tried setting a delay equal to the number of elements before emptying the div. I've tried moving the code to populate the thumbnails div from the OnThumbSuccess function to the ajax.done() function.

I'm really at a loss as to how I can do this elegantly. Please let me know what, if any other details I can provide.

I made this test fiddle, maybe this will be of some help: http://jsfiddle.net/kum8d7k9/

yeah we already solved this problem – taki Martillo Jul 15 '15 at 18:28 — taki Martillo, Jul 15 '15 at 18:28
awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Dr Upvote Jul 15 '15 at 18:34 — Dr Upvote, Jul 15 '15 at 18:34

score 0 · Accepted Answer · answered Jun 26 '15 at 01:22

Well, in the process of writing this question, I have come up with the following solution, which seems to work quite well:

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');

        }

I have moved the .empty() function to the $.ajax.done() function and set a timeout on it equal to the number of child elements I have to fade multiplied by the animation duration with a little wiggle room.

Next I'll have to conjure up a way to transition those elements in as well. This has been most educational, but if someone has a better solution in mind, I'm all ears.

bleh it just feels so much like an undignified hacking-at-it-until-it-works solutions. — taki Martillo, Jun 26 '15 at 01:25

score 0 · Answer 2 · answered Jul 15 '15 at 18:24

You don't want to call .remove() until after the animation completes so you will need to use the complete callback function of jQuery animate, http://api.jquery.com/animate/.

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

The chaining did not work as the animate function returns immediately rather than after the animation is complete.

$('#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>

jQuery animate dynamic elements one at a time

2 Answers2