jquery slideToggle() et hauteur inconnue?

Question

Im en utilisant jquery 1.3.2 et voici le code:

<script type="text/javascript"> 
    //<![CDATA[ 
    jQuery(function(){ 
     jQuery('.news_bullet a.show_preview').click(function() { 
      jQuery(this).siblings('div').slideToggle('slow'); 
      return false; 
     }).toggle(
     function() { 
      jQuery(this).css({ 'background-position' : '0 -18px' }); 
     }, 
     function() { 
      jQuery(this).css({ 'background-position' : '0 0' }); 
     }); 
    }); 
    //]]> 
</script> 

Si vous voyez here j'ai tas de petits vert + qui, lorsque vous cliquez sur un texte est révélé et la position d'arrière-plan est modifié pour ce lien si alors il montre l'autre partie de l'image, rouge -. Donc le problème que je suis est que je ne connais pas la hauteur de ces éléments cachés, parce que cela dépend de combien de texte il y a, donc quand je clique sur + et que je les montre, l'animation saute.

Une solution de contournement que j'ai trouvé est de mettre la hauteur fixe et le débordement: caché à ces éléments cachés. Vous pouvez voir à quel point l'animation est plus fluide dans le bloc en haut à gauche (celui avec 'Vesti iz sveta crtanog filma' en haut). Tous les autres blocs n'ont pas de hauteur fixe, et l'animation est 'sautante'. Atm qui fixe la hauteur dans le bloc supérieur gauche est 30px, mais certains éléments nécessitent plus de hauteur et certains exigent moins, ce n'est pas une bonne solution ... :)

Alors comment arrêter cette animation de «sauter» quand il n'y a pas de hauteur fixe?

Answer 1

Si vous leur donnez une largeur en CSS, il va arrêter ce comportement:

.news_bullet .hide { width: 272px; } 

Ou même avec jQuery:

jQuery(".news_bullet .hide").width(272); 

Chacune de ces options vont arrêter les diapositives jumpy :)

Answer 2

En tant que praticien de l'Amélioration Progressive, je vous dirais d'abord de ne pas cacher ce texte avec javascript désactivé. Lors du chargement de la page: stockez la hauteur des éléments dans un var, puis définissez la hauteur pour masquer les lignes de texte supplémentaires comme vous êtes maintenant. Utilisez cette variable pour définir la hauteur que vous souhaitez animer dans votre bascule et ça devrait aller.

Exemple de code ici: http://www.pewpewlaser.com/articles/jquery-smooth-animation