jquery .slideToggle() pozioma alternatywa?

Question

slideToggle robi dokładnie to, co chcę, tylko chcę, aby slajd był poziomy.

Mam teraz horizontalhide/show i animację po kliknięciu, ale chciałbym mieć opcje przełączania. Tak więc, gdy kliknę na aktywny link, odtworzy on animację odwróconą i ukryje się.

Jaki byłby najlepszy sposób na zrobienie tego?

Answer 1

Można użyć metody animate:

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

http://jsfiddle.net/7ZBQa/

Answer 2

Utworzony skrzypce http://jsfiddle.net/powtac/RqWk2/

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

Answer 3

chciałem wysokość, aby przełączać się więc użyłem (użyłem w moim projekt)

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

Answer 4

Jest inny sposób użycia jquery ui. Zobacz api jquery ui ale nie zawsze może być przydatna, ponieważ ma swoje usterki

Tutaj jsfiddle zobaczyć glitch, że nie porusza się wszystkie elementy, reszta gładko. Umieściłem tutaj kod, ale powinien być używany z 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

Próbowałem tego i działa świetnie!

kod 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> 

CSS /* szyby przerzucić po najechaniu */ .flip pojemnika z: umieszczenie .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); 
} 

Używam tego wewnątrz bootstrap Col-SM * i działa świetnie zbyt

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

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

Jeśli potrzebne to być ciągły, można skonfiguruj setTimeinterval w następujący sposób:

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

Answer 7

Jeśli chcesz przełączać pomiędzy dwoma szerokości mógłby zrobić coś jak poniżej:

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