then - jquery.slideToggle() alternativa horizontal?

slidedown jquery ejemplos

Question

slideToggle hace exactamente lo que quiero, solo quiero que la diapositiva sea horizontal.

Ahora tengo un oculto horizontal / show y animación al hacer clic, pero me gustaría tener las opciones de alternar. De modo que cuando haga clic en el enlace activo, reproducirá la animación invertida y se ocultará.

Cuál sería la mejor forma de hacer esto?

Answer 1

Creó un fiddle http://jsfiddle.net/powtac/RqWk2/

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

Answer 2

Hay otra forma, usar jquery ui. Ver api jquery ui pero puede que no siempre sea útil ya que tiene sus fallos.

Aquí jsfiddle para ver la falla, no mueve todos los elementos del resto sin problemas. Pongo aquí el código, pero debería usarse con 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 3

He intentado esto, y funciona muy bien!

código 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>

El CSS / * voltea el panel cuando se desplaza * / .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);
}

Yo uso esto dentro de un bootstrap col-sm- * y funciona muy bien también

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

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

Si deseas alternar entre dos anchuras, puedes hacer algo como a continuación:

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

Answer 5

Si necesitaba que fuera continuo, puede configurar setTimeinterval de la siguiente manera

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

Answer 6

Quería que la altura cambiara así que la usé (la usé en mi proyecto)

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

Answer 7

Puedes usar el método animate :

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

http://jsfiddle.net/7ZBQa/