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

Unable to get an element animation to wait for another in jquery

本文关键字：元素 动画 等待 另一个 获取 jquery      更新时间：2023-09-26

如果你去看相册(例如。自然，因为仍在处理其他图像(，然后单击其中一个图像，它们都会淡出，然后您单击的图像似乎只显示在屏幕上。正在发生的事情是，随着缩略图的淡出，它仍在淡入。我尝试在 .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);
            })
        );
});
});

您可以使用 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);
            })
        );
    });
  });
});
相关文章：