在图像显示之前运行动画

Question

我有一个放在一起的灯箱，当单击下一个/上一个时，它会淡入另一个图像。

我遇到的问题是在图像出现之前为灯箱的宽度和高度设置动画。

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

});

在顶部，我正在为当前图像设置动画，使其淡出，然后用新图像替换它。然后我正在加载一个函数，该函数获取图像的高度和宽度，并对灯箱的高度和宽度进行动画处理，使其比实际图像大。

任何帮助都会非常有帮助。

提前致谢。

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

});