Alternative à slideDown() et slideUp() de jQuery n'affectant pas la propriété d'affichage

J'ai essayé d'utiliser l'effet slideDown() pour un site Web sur lequel je travaille, mais j'ai de la difficulté à obtenir l'effet désiré . Voici un exemple montrant ce que je veux accomplir.Alternative à slideDown() et slideUp() de jQuery n'affectant pas la propriété d'affichage

<div> 
    blahblahblahblah 

    <span id="span_more" style="display:none"> 
     blahblahblah 
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div> 
</div>

En gros, quand « Mais ... » est cliqué, je veux le texte qui est actuellement caché à apparaître en utilisant un effet de glissement, tout en restant en ligne avec la fin du texte visible. Cela ne semble pas possible avec slideDown() car il change d'affichage pour bloquer.

Merci beaucoup.

Source

2010-10-07 Patrice Paquette

Malheureusement, ceci est essentiellement impossible. L'animation de jQuery repose sur l'élément ayant la hauteur et la largeur. Les éléments en ligne n'ont pas ces dimensions définies ou paramétrables, donc les animations (que ce soit en utilisant animate ou slideUp) doivent en faire des éléments de niveau bloc.

fadeIn fonctionne, et peut être une alternative utile.

Source

2010-10-07 22:46:36 lonesomeday

Mais sans doute vous pouvez y parvenir en affichant les éléments '' inline' comme ligne-block' (cela devrait même travail sur IE6, avec un doctype valide)? –

@David Je ne peux pas faire ce travail, même en FF3.6! Je ne pense pas que jQuery aime animer 'inline-block' ... – lonesomeday

Il pourrait bien avoir des problèmes avec la partie' inline' de base, je ne l'ai pas * essayée * avant de faire ma présomption, c'est juste que j'ai supposé le besoin de jQuery pour 'width' et' height' pourrait être satisfait par 'display: inline-block' était tout. Ah, ma naïveté volontaire ... =) –

J'ai déjà eu ce problème auparavant. À ce moment-là, il semblait impossible de changer le comportement de jQuery, et j'ai rencontré des problèmes lors de l'écriture d'une routine qui ferait la même chose avec les blocs en ligne. Donc, je suis passé à simplement utiliser display: block éléments avec float: left pour les garder dans une ligne.

<div> 
    <div style="display: block; float: left;">blahblahblahblah</div> 

    <div id="span_more" style="display: none; float: left;"> 
     blahblahblah 
    </div> 

    <a style="display: block; float: left;" class="link_more" id="more">More&hellip;</a></div> 
</div>

Source

2010-10-07 22:46:57 thomaspaulb

Vous aurez besoin d'envelopper votre texte qui montre toujours dans une période ou div qui flotte à gauche, ont le flotteur texte « supplémentaire » gauche aussi bien, et votre lien clear: both;, mais cette structure fera une travail simple .slideDown():

<div> 
    <span style="float: left;">blahblahblahblah</span> 

    <span id="span_more" style="display: none; float: left;"> 
     blahblahblah 
    </span> 

<div style="clear: both;"><a class="link_more" id="more">More&hellip;</a></div> 
</div>

Voici une démo montrant en action: http://jsfiddle.net/7yqMr/

Source

2010-10-07 22:50:25 Ender

Merci pour votre réponse. Cela semblait être une bonne solution, mais cela ne fonctionne pas avec un texte plus long. –

Alternative à slideDown() et slideUp() de jQuery n'affectant pas la propriété d'affichage

Répondre

Questions connexes