在图像显示之前运行动画

Question

我有一个灯箱我已经放在一起，当下一个/上一个被点击时会淡入图像。

我遇到麻烦的是，在图像出现之前将lightbox的宽度和高度设置为动画效果。

$('img#image').animate({ opacity: 0 }, 500) 

$('img#image').attr('src', image).load(function() { 

    var imgWidth = $('img#image').width(); 
    var imgHeight = $('img#image').height(); 

    $('#lightbox').animate({ 'width': imgWidth + 20 }, 500).delay(1000); 
    $('#lightbox').animate({ 'height': imgHeight + 100 }, 500).delay(1000); 
    $('#lightbox img#image').animate({ opacity: 1 }, 500); 

}); 

在顶端，我动画当前的图像，因此fadesout，然后用新的图片替换它。然后我加载一个函数，该函数获取图像的高度和宽度，并将lightbox的高度和宽度设置为动画，使其大于实际图像。

任何帮助将是巨大的帮助。

在此先感谢。

Answer 1

也许隐藏图像先调整，然后再显示：

$('img#image').animate({ opacity: 0 }, 500) 

$('img#image').hide(); // ADDED THIS LINE 

$('img#image').attr('src', image).load(function() { 

    var imgWidth = $('img#image').width(); 
    var imgHeight = $('img#image').height(); 

    $('#lightbox').animate({ 'width': imgWidth + 20 }, 500).delay(1000); 
    $('#lightbox').animate({ 'height': imgHeight + 100 }, 500).delay(1000); 

    $('img#image').show(); // ADDED THIS LINE 

    $('#lightbox img#image').animate({ opacity: 1 }, 500); 

});