0

我在页面中添加了一个 JQuery 幻灯片显示效果，该页面部分显示主要内容 div（带有文本、flash 和/或图像）几秒钟，然后动画显示完整内容 div。脚本动画被添加到页面上的“.slide”类 div 中，它可以根据放置多少文本或其他元素而具有不同的高度。我已经在 IE6 和 FF 3 上对其进行了测试，它“有点”美好的。

然而，在 IE7 中测试动画并没有完全显示 div，它仍然非常糟糕地覆盖了大部分内容。有时在其他浏览器上也会发生不正确的覆盖或裁剪，因此幻灯片显示 div 动画不会一直打开。

我猜浏览器没有正确计算 div 的完整高度，其中包含所有包含的内容，包括间距、填充和行高。

有什么方法可以使这个工作正常，以便脚本获得准确的 div 高度，然后动画滑动到正确的位置？

相关幻灯片页面。

相关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 });
}
4

1 回答 1

0

这是一个更优雅的四线解决方案，它不依赖于 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-02T22:17:13.260 回答