Jquery 在图像显示之前运行动画

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

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

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

});

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

任何帮助都会大有帮助

---

提前感谢。

可能先隐藏图像，然后调整大小，然后显示：

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

});

---

谢谢你回复我。我已经试过了，但在灯箱的宽度和高度改变之前，图像仍然会出现。似乎图像在运行$'imgimage'.attr'src'图像时出现，然后在隐藏图像时消失，然后在动画出现时重新设置动画。很烦人。谢谢你的尝试！我认为这正是你想要达到的——看看源代码，看看他们是如何做到的。。。