jQuery slideToggle() avec Internet Explorer et animation sauteuse

Question

J'ai un gros problème avec ma jquery. J'ai finalement fait en sorte que mon slidetoggle fonctionne dans Firefox. L'animation est un peu nerveuse à la fin de l'animation. J'ai lu beaucoup de solutions de contournement, mais en quelque sorte rien ne m'a vraiment aidé. Peut-être que quelqu'un d'entre vous peut me sortir de ce dilemme.

L'autre plus gros problème est que les div cachés sont malheureusement montrés directement au démarrage dans Internet Explorer. Je l'ai testé dans IE6 & 7. Et l'effet de glissement est également très étrange.

Est-ce que quelqu'un d'entre vous sait si je dois donner un style supplémentaire pour IE ???

Voici mon site je travaille sur:

http://www.haus-plan.de/_01_Hausplan/

les titres rouges sont dans la zone coulissable de contenu et les deux diapositives mots sur le panneau droit. J'ai remarqué qu'Internet Explorer exécute correctement le premier mot Slide sur le panneau de droite. Ici, son div est d'abord caché et n'apparaît que lorsque nous cliquons et le laissons glisser vers le bas. Mais pour les autres divs ils sont présentés au début qui est très sh .....

S'il vous plaît .... meee aident

Answer 1

Pour garder les divs cachés de la charge, essayez de régler le « d_show _hide «classe à « display: none », puis mis cela sur votre DOM prêt:

$('.d_show_hide').show(); 

le CSS chargera avec le style défini pour ne pas afficher, puis, lorsque le DOM est prêt, il montrera votre div. Vous pouvez mettre ceci après votre appel de méthode "slideToggle".

Vous pouvez également essayer de charger la div 'd_show _hide' sur la fenêtre au lieu de DOM ready; Cela permettra de s'assurer que les éléments qui s'y trouvent sont prêts à être utilisés avant d'appeler la méthode.

$(window).load(function(){ 
    //slide toggle here 
} 

Answer 2

<li> 
    <a href="#" id="sombra" onclick="$('#opt_1').slideToggle(360);">MUEBLES</a> 
    <!-- just have to force the width of the elemet! --> 
    <ul id="opt_1" style="display:none; width:164px;"> 
     <!-- content --> 
    </ul> 
</li> 

Suffit de forcer la largeur du conteneur qui est le problème!