Pourquoi cette animation de diapositive JQuery a-t-elle un problème de hauteur avec le DIV?

Question

J'ai ajouté un effet de projection de diapositives JQuery à une page qui affiche partiellement le contenu div principal (avec du texte, flash et ou images) pendant quelques secondes puis il s'anime pour révéler la div contenu complet. L'animation scriptée est ajoutée à la classe ".slide" div sur la page qui peut avoir une hauteur différente selon la quantité de texte ou d'autres éléments placés. Je l'ai testé sur IE6 et FF 3 et ça marche "un peu" bien. Cependant, le test de l'animation dans IE7 ne révèle pas complètement la div et il couvre très mal la plupart du contenu. Il arrive aussi que la dissimulation ou la recopie incorrecte se produise également sur d'autres navigateurs, de sorte que la diapositive révèle que l'animation div ne s'ouvre pas complètement.

Je suppose que les navigateurs ne calculent pas correctement la hauteur totale de la div avec tout le contenu contenu, y compris les espacements, le remplissage et la hauteur de ligne.

Y a-t-il un moyen de faire en sorte que cela fonctionne correctement afin que le script obtienne la hauteur div exacte et que l'animation glisse à la bonne position?

The relevant slide page.

Code JQuery pertinent:

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

Answer 1

Voici une plus élégante solution à quatre doublure qui ne repose pas sur la hauteur absolue 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); 
}); 

tout ce que vous avez à faire est de vous assurer les éléments visibles au début ont la classe showAtFirst.