jquery .slideToggle() horizontale Alternative?

Question

slideToggle macht genau das, was ich will, nur möchte ich, dass die Folie horizontal ist.

Ich habe jetzt eine horizontale ausblenden/show und animation auf klicken, aber ich hätte gerne die Umschaltoptionen. Wenn ich also auf den aktiven Link klicke, wird die Animation rückwärts abgespielt und versteckt sich.

Was wäre der beste Weg, dies zu tun?

Answer 1

Sie die animate Methode verwenden können:

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

http://jsfiddle.net/7ZBQa/

Answer 2

eine Geige Erstellt http://jsfiddle.net/powtac/RqWk2/

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

Answer 3

ich die Höhe wollte wechseln, so habe ich (ich habe in meiner Projekt)

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

Answer 4

Es gibt eine andere Möglichkeit, jquery ui zu verwenden. Siehe api jquery ui aber es kann nicht immer nützlich sein, da es seine Pannen hat

Hier jsfiddle die Panne zu sehen, es ist nicht alle Elemente, die die Ruhe sanft bewegt. Ich habe hier Code, aber es sollte mit jQuery UI 1.10.3 verwendet werden.

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

ich das ausprobiert und funktioniert super!

HTML-Code:

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

Die CSS /* die Scheibe drehen, wenn schwebte */ .flip-Container: schweben .flipper, .flip-container.hover.Flipper { transform: rotiereY (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); 
} 

Ich benutze diese in einem Bootstrap-col-SM- * und arbeitet zu groß

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

die 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

Wenn Sie es kontinuierlich sein, benötigt können Sie setTimeinterval wie folgt einrichten

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

Answer 7

Wenn Sie zwischen zwei Breiten umschalten wollen könnten Sie so etwas wie unten tun:

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