J’ai le code suivant pour animer l’affichage / masquage d’un div.
$(".headerClosed, .headerOpen").live("click", function(){ $(this).next().slideToggle("slow"); }
Cela montre et cache une div avec le balisage suivant:
Le problème est dans IE (surprise, surprise!) Lorsque la div glisse vers le bas, l’animation est fluide jusqu’à la fin quand elle se branle. Je sais que cela est dû aux parameters de remplissage / marge de la div.
Si j’utilise un
, l’animation est fluide, mais dès que j’ajoute un remplissage ou une marge au
Enveloppez la div dans une autre div. Ajoutez le padding / margin au div interne et appelez l’animation sur le div externe.
Date
Text
Vos marges sont probablement en train de s’effondrer. Lorsque vous appliquez un float
, un overflow: auto
ou un overflow: hidden
à l’élément slided, cela ne devrait plus se produire.
jQuery définit le overflow: hidden
pendant l’animation, afin que les marges ne se réduisent pas. Lorsque l’animation est terminée, cette propriété est supprimée. Les marges du
s’effondrent à nouveau, ce qui donne un petit saut saccadé à la fin.
J’ai eu le même problème, et ce que j’ai fait était d’animer la marge et le remplissage pendant la diapositive:
$(this).next().slideToggle("slow"); $(this).next().animate({ margin: "XXpx", padding: "XXpx" }, "slow");
En les réglant tous les deux au ralenti, vous vous assurez qu’ils sont terminés en même temps.