jquery .slideToggle () alternative horizontale?

slideToggle fait exactement ce que je veux, mais je veux seulement que la diapositive soit horizontale.

J’ai maintenant un affichage horizontal / animation et une animation sur clic, mais j’aimerais avoir les options de basculement. Ainsi, lorsque je clique sur le lien actif, l’animation est inversée et se cache.

Quelle serait la meilleure façon de faire cela?

Vous pouvez utiliser la méthode animate :

 $('#element').animate({width: 'toggle'}); 

http://jsfiddle.net/7ZBQa/

Création d’un violon http://jsfiddle.net/powtac/RqWk2/

 $("div").animate({width: 'toggle'}); 

Il y a une autre façon d’utiliser jquery ui. Voir api jquery ui mais il peut ne pas être toujours utile car il a ses défauts

Ici jsfiddle pour voir le pépin, ça ne bouge pas tous les éléments du rest en douceur. Je mets ici le code, mais il doit être utilisé avec l’interface utilisateur jQuery 1.10.3.

js

 $( document ).click(function() { $( "#toggle" ).toggle('slide'); }); 

css

 .t { width: 100px; height: 100px; background: #ccc; display: inline-block; float: left; } 

html

  

Click anywhere to toggle the box.

1
2
3

J’ai essayé ceci et fonctionne très bien!

Code HTML:

 

Le CSS / * retourne le volet lorsque vous survolez * / .flip-container: hover .flipper, .flip-container.hover .flipper {transform: rotateY (180deg); }

 .flip-container, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } 

je l’utilise dans un col-sm- * bootstrap et fonctionne très bien aussi

  

Share your emotions

Share emotions with friends, family and teammates.

le css

 .content-box { position: relative; text-align: center; height: 105px; width: 100%; } .content-box-icon { font-size: 30px; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; text-align: center; display: block; margin: 5px auto 15px auto; color: #fff; float: none; background:#25acfd } .content-box-front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 105px; } .content-box-back { transform: rotateY(180deg); backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 105px; } /* entire container, keeps perspective */ /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } 

Si vous en aviez besoin, vous pouvez configurer setTimeinterval comme suit:

  

Si vous souhaitez basculer entre deux largeurs, vous pouvez faire quelque chose comme ci-dessous:

 $('#A').click(function(){ if($(this).width() > 20){ $(this).animate({width: '20px'}) } else{ $(this).animate({width: '50%'}) } }); 
 #A{ float:left; width:50%; height:300px; background:red; } #B{ min-height:300px; background:green; } 
  
Some stuff

Je voulais que la hauteur change pour que j’aie utilisé (j’ai utilisé dans mon projet)

 function show_hide(target){ var x = document.querySelectorAll("." +target); var y = $( x ).next() $(y).animate({height: 'toggle'}); }