在圖像顯示之前運行動畫

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

});