jquery .slideToggle () alternativa orizzontale?

slideToggle fa esattamente quello che voglio, voglio solo che la diapositiva sia orizzontale.

Ora ho un orizzontale / spettacolo e animazione al clic, ma mi piacerebbe avere le opzioni di commutazione. In modo che quando clicco sul link attivo, riprodurrà l’animazione invertita e si nasconderà.

Quale sarebbe il modo migliore per farlo?

Puoi usare il metodo animate :

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

http://jsfiddle.net/7ZBQa/

Creato un violino http://jsfiddle.net/powtac/RqWk2/

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

C’è un altro modo, per usare jquery ui. Vedi api jquery ui ma potrebbe non essere sempre utile in quanto ha i suoi difetti

Qui jsfiddle per vedere il problema tecnico , non sposta tutti gli elementi di rest senza problemi. Inserisco qui il codice, ma dovrebbe essere usato con l’interfaccia utente 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

ho provato questo, e funziona alla grande!

codice html:

 

Il CSS / * capovolge il pannello quando passa il mouse su * / .flip-container: hover .flipper, .flip-container.hover .flipper {transform: ruateY (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); } 

lo uso all’interno di un bootstrap col-sm- * e funziona egregiamente

  

Share your emotions

Share emotions with friends, family and teammates.

il 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; } 

Se è necessario che sia continuo, è ansible impostare setTimeinterval come segue

  

Se desideri passare da una larghezza all’altra puoi fare qualcosa di simile qui sotto:

 $('#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

Volevo che l’altezza si alternasse, quindi ho usato (ho usato nel mio progetto)

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