jquery .slideToggle() alternative horizontale?

Question

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

J'ai maintenant un horizontalhide/show et une animation sur click, mais je voudrais avoir les options toggle. Alors que quand je clique sur le lien actif, il va jouer l'animation inversée et se cacher.

Quelle serait la meilleure façon de faire cela?

Answer 1

Vous pouvez utiliser la méthode animate:

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

http://jsfiddle.net/7ZBQa/

Answer 2

créé un violon http://jsfiddle.net/powtac/RqWk2/

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

Answer 3

Je voulais la hauteur à basculer si je (je dans mon projet)

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

Answer 4

Il existe 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, il ne se déplace pas tous les éléments de repos en douceur. Je mets ici du code, mais il devrait être utilisé avec jQuery UI 1.10.3.

js

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

css

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

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<p>Click anywhere to toggle the box.</p> 
<div id="toggle" class='t'>1</div> 
<div id="" class='t'>2</div> 
<div class='t'>3</div> 

Answer 5

J'ai essayé, et fonctionne très bien!

code HTML:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <!-- front content --> 
     </div> 
     <div class="back"> 
      <!-- back content --> 
     </div> 
    </div> 
</div> 

Le CSS /* Retourner le volet lorsque plané */ .flip-conteneur: vol stationnaire .flipper, .flip-container.hover.Flipper { Transformer: 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); 
} 

i utiliser dans un bootstrap col-SM- * et fonctionne très bien aussi

<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');"> 
        <div class="content-box flipper"> 
         <div class="content-box-front"> 
          <span class="glyphicon glyphicon-envelope content-box-icon"></span> 
          <h4>Share your emotions</h4> 
         </div> 
         <div class="content-box-back"> 
          <p>Share emotions with friends, family and teammates.</p> 
          <button>Read more</button> 
         </div> 
        </div> 
       </div> 

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

Answer 6

Si vous en aviez besoin d'être continue, vous pouvez configurer setTimeinterval comme suit

<?php 
setInterval(function(){ 
$('div').animate({width: 'toggle'}); 
},200); 
?> 

Answer 7

Si vous souhaitez basculer entre les deux années largeur que vous pourriez 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="A"> 
 
</div> 
 
<div id="B"> 
 
<span>Some stuff</span> 
 
</div>