javascript - 无法获取元素动画以等待 jquery 中的另一个元素动画

Question

如果您转到相册(例如 Nature，因为仍在处理其他相册)并单击其中一张图像，它们都会淡出，然后您单击的图像似乎只出现在屏幕上。发生的事情是随着缩略图淡出，它仍在淡入。我尝试将其余代码添加到 .complete() 中，但这似乎破坏了它。

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

您可以使用 promise捕捉完整的淡出动画:

$(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);

            })
        );
    });

  });

});