爲什麼這個JQuery滑動動畫與DIV有高度問題？

我已經添加了一個JQuery幻燈片顯示效果的頁面，部分顯示主要內容的div（文字，閃光燈和或圖像）幾秒鐘然後它動畫顯示完整的內容分區。腳本動畫被添加到頁面上的「.slide」類div中，根據文本或其他元素的放置位置，它可以具有不同的高度。我已經在IE6和FF 3上測試過它，它「起作用」精細。爲什麼這個JQuery滑動動畫與DIV有高度問題？

但是，在IE7中測試動畫並不能完全揭示div，它仍然非常糟糕地覆蓋了大部分內容。此外，有時在其他瀏覽器上也會出現不正確的掩蓋或裁剪情況，所以幻燈片顯示div動畫不會一路打開。

我猜瀏覽器不能正確計算div的全部高度，包含所有包含的內容，包括間距，填充和行高。

是否有任何方法可以使其正確工作，以便腳本獲取確切的div高度，然後將動畫滑動到正確的位置？

The relevant slide page。

相關jQuery代碼：

// Set the initial open height for sliding div: 
var sliderHeight = "485px"; 

var initialDelay = 2000; 
var slideDuration = 2000; 

$(document).ready(function(){ 

// Show the slider content 
$('.slider').show(); 

$('.slider').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
}); 

$(".slider").css("height", sliderHeight); 

var delay = function() { sliderOpen(); }; 

setTimeout(delay, initialDelay); 

}); 


function sliderOpen() 
{ 
var open_height = $(".slider").attr("box_h") + "px"; 
$(".slider").animate({"height": open_height}, {duration: slideDuration }); 
}

來源

2010-03-02 reinhat

這裏是一個更優雅的四班輪的解決方案，不PX依靠絕對高度：

$(function() { 
    var initialDelay = 2000; 
    var slideDuration = 2000; 
    $(".slider").show().children().not(".showAtFirst").hide(); //show the parent container but hide all children. 
    window.setTimeout(function() { $(".slider").children(":hidden").slideDown(slideDuration) }, initialDelay); 
});

所有你需要做的就是確保在開始處可見的元素具有showAtFirst類。

來源

2010-03-02 22:17:13 matdumsa

爲什麼這個JQuery滑動動畫與DIV有高度問題？

回答

相關問題