0

メイン コンテンツの div (テキスト、フラッシュ、または画像を含む) を数秒間部分的に表示するページに JQuery スライド リビール エフェクトを追加し、アニメーション化して完全なコンテンツ 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

これは、ピクセル単位の絶対高さに依存しない、よりエレガントな 4 ライナー ソリューションです。

$(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 に答える