JQuery IE animation de diapositives saccadées

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

au lieu de

, l’animation est fluide, mais dès que j’ajoute un remplissage ou une marge au

, les secousses de l’animation. Comment pouvez-vous faire glisser un joli div avec un espacement si les parameters de remplissage et de marge le rendent saccadé?

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.