jQueryUI的動畫與inital未定義高度

http://jsfiddle.net/NYZf8/1/（查看在不同的屏幕尺寸，以便理想地在圖像內適合％-width佈局div）

圖像應該開始從動畫完成後它正確出現的位置開始的動畫。我不明白爲什麼第一個電話setMargin()設置了一個負邊距，即使記錄的容器div和img的高度是非常相同的，在jqueryui show()調用後將圖像設置在我想要的位置（從一開始上）。我的猜測是，不管怎樣，圖像高度畢竟是0/undefined，儘管它記錄的很好：？

JS：

console.log('img: ' + $('img').height()); 
console.log('div: ' + $('div').height()); 

$('img').show('blind', 1500, setMargin); 

function setMargin() { 
    var marginTop = 
    ($('img').closest('div').height() - $('img').height())/2; 

    console.log('marginTop: ' + marginTop); 

    $('img').css('marginTop', marginTop + 'px'); 
} 

setMargin();

來源

2012-01-21 kontur

您是否在HTML中定義了img的高度？也許JS在圖像完全加載之前就開始燒製，所以瀏覽器抓錯了高度。 – skybondsor

我正在使用百分比調整大小的圖像 - 不知道這是否會在img標籤中設置高度和寬度。所以，不，我沒有，但我可以嘗試一下。 – kontur

@kontour這會觸發你的動畫，但它仍然不是很正確：http://jsfiddle.net/NYZf8/2/ – scottm

有趣的問題......你的代碼打了一段時間（最新更新）後，我看到blind動畫實際上並沒有在我的瀏覽器觸發（我測試在Chrome，也許這是射擊，但我沒有看到它的形象從來沒有隱藏在首位），所以我試圖移動它內綁定的load功能：

$('img').bind('load', function() { 
    ... 
    $(this).show('blind', 500); 
});

現在它是動畫效果的，在動畫完成後它似乎'快速'或'跳躍'，並且似乎也出現了不正確的邊距。這有點jQuery不能正確計算屏幕上尚未顯示的東西的尺寸。最重要的是，blind似乎需要更明確的尺寸才能正確操作。那麼問題就出在這裏：如何在實際出現在屏幕上之前計算元素的渲染尺寸？

要做到這一點的一種方法是，淡入淡出你想要計算的尺寸非常小的元素 - 還不夠看 - 尚未完成 - 執行一些計算，然後再次隱藏併爲外觀動畫做準備。您可以使用fadeTo功能使用jQuery實現這一目標：

$('img').bind('load', function() { 

    $(this).fadeTo(0, 0.01, function() { 

     // do calculations... 

    } 
}

您將需要制定方面，與css()功能應用它們，在盲目的圖像，然後重置形象風格，回到原來的狀態，所有這要歸功於需要明確指定這些尺寸的blind動畫。我還建議使用css中的類來幫助您更好地管理事情。這裏有一個詳細的工作示例：jsfiddle working example

不是最優雅的做事方式，但它是一個開始。有更多更簡單的方法來實現看起來更好的結果，我想我只是想知道爲什麼你要這樣做圖像盲和明確的對齊方式？用你使用的代碼來實現它就更具挑戰性......無論如何，希望這有助於你！ :)

來源

2012-01-22 09:11:30

這正是這個問題如此混亂的原因。它正確地記錄了圖像尺寸，但jqueryui的動畫似乎沒有正確抓取，從0/undefine開始，我想。您的解決方案完美無缺，完全符合我的意圖。不是這個特別的css和動畫設置可能並不是我最後想到的，但我有不同的方法（例如，縮放圖像以適合），失敗的原因是相同的，這是這種動畫怪異的「毫無根據「的圖像。看到我不得不統一的「笨拙」代碼，我可能會重新考慮animation.ty – kontur

jQueryUI的動畫與inital未定義高度

回答

相關問題