如果您转到相册(例如 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);
})
);
});
});
最佳答案
您可以使用 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);
})
);
});
});
});
关于javascript - 无法获取元素动画以等待 jquery 中的另一个元素动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35387559/