web-dev-qa-db-fra.com

jquery .slideToggle () alternative horizontale?

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

J'ai maintenant un affichage/animation horizontal et une animation sur clic, mais j'aimerais avoir les options de bascule. Ainsi, lorsque je clique sur le lien actif, l'animation est inversée et se cache.

Quelle serait la meilleure façon de faire cela?

jqueryhtmltoggleslidetoggle
49
ThomasCS

Vous pouvez utiliser la méthode animate: 

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

http://jsfiddle.net/7ZBQa/

97
undefined

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

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

Il y a une autre façon d'utiliser jquery ui. Voir api jquery ui , Mais il ne sera peut-être pas toujours utile car il a ses problèmes

Ici jsfiddle pour voir le petit problème, il ne déplace pas tous les éléments restants sans à-coups . J'ai mis ici le 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>
1
Yevgeniy Afanasyev

j'ai essayé cela 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 /* retourne le volet en survol */ .flip-container: survolez .flipper, .flip-container.hover .flipper { transformer: rotationY (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);
}

j'utilise ceci à l'intérieur d'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;
}
0
user3683003

Si vous aviez besoin que ce soit continu, vous pouvez configurer setTimeinterval comme suit

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

Si vous souhaitez basculer entre deux largeurs, vous pouvez faire 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>

0
sjsam