无法获取元素动画以在jQuery中等待另一个

Question

If you go to an album (eg. Nature because still working on the others) and click one of the images they all fade out and then the one you clicked appears to just show up on the screen. What is happening is that it is still fading in as the thumbnails are fading out. I tried adding the rest of the code inside a .complete(), but that seems to break it.

$(document).ready(function(){


$('.photos').on('click', function() {

    var src = $(this).attr('src').replace('thumb-','');
    $('.photos').stop().fadeOut(500);
        $('.enlarged').remove();
        $('#album').append('<img class="enlarged" src="' + src + '">');
        $('.enlarged').hide();
        $('.enlarged').stop().fadeIn(500).done(
            $('.enlarged').on('click', function () {

                $(this).stop().fadeOut({

                    duration: 500,
                    done: this.remove()
                });

                $('.photos').stop().fadeIn(500);

            })
        );
});

});

Answer 1

You can use promise to catch complete all fade out animation:

$(document).ready(function(){

  $('.photos').on('click', function() {

    var src = $(this).attr('src').replace('thumb-','');
    var photos = $('.photos');
    photos.stop().fadeOut(500);

    photos.promise().done( function() {
        $('.enlarged').remove();
        $('#album').append('<img class="enlarged" src="' + src + '">');
        $('.enlarged').hide();
        $('.enlarged').stop().fadeIn(500).done(
            $('.enlarged').on('click', function () {

                $(this).stop().fadeOut({    
                    duration: 500,
                    done: this.remove()
                });

                $('.photos').stop().fadeIn(500);

            })
        );
    });

  });

});