jquery .slideToggle() alternative horizontale?

slideToggle fait exactement ce que je veux, que je veux la diapo à l'horizontale.

J'ai maintenant une horizontalhide/spectacle et animation sur la souris, mais je voudrais avoir la bascule options. De sorte que lorsque je clique sur le lien actif, il va jouer l'animation inversé et se cacher.

Quelle serait la meilleure façon de le faire?

InformationsquelleAutor ThomasCS | 2013-01-22
  1. 102

    Vous pouvez utiliser le animate méthode: 

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

    http://jsfiddle.net/7ZBQa/

    • Jeah c'est ce que je voulais, merci pour la réponse. Je n'ai pas encore vraiment comprendre la { width: 'toggle'} déclaration. Vous avez défini la largeur dans le css, mais l'affichage à aucun. Donc, jquery, puis affiche l'élément et anime la largeur?
    • Ces propriétés ne sont pas nécessaire, j'ai juste ajouté pour la démo et oui, jQuery anime la largeur, si l'élément est masqué, jQuery anime la largeur et de la montrer, et vice-versa.
    • Mais j'ai encore à donner à chaque bouton d'une autre classe ou id, parce que sinon, on bouton de bascule de l'un à l'autre?
    • Eh bien, c'est lié à la sélection et la logique derrière votre code, si vous voulez animer plusieurs éléments que vous pouvez ajouter des attributs de classe pour eux.
    • l'ia, viens de découvrir que sa ne fonctionne pas à 100%. Les liens de tous les charger dans le même iframe, donc je suis à l'animation de l'iframe. Et ils s'animent les uns les autres iframe...
    • Pour cela, vous pouvez poster une autre question.
    • ici, la partie gauche est statique et la bascule se passe à partir de la droite , peut-il être fait de telle manière que le droit reste statique et bascule de gauche .
    • cette solution est donc elegante!

    InformationsquelleAutor undefined
  2. 4

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

    $("div").animate({width: 'toggle'});
    • ah bon, mais je veux qu'il soit dans l'autre sens, qu'il sera pop-up quand je clique sur quelque chose.
    • Au lieu de width: 'toggle' vous froid utilisation width: '200px'
    • mais alors il ne serait pas de bascule de plus?
    • pas de. il ne balayez jusqu'à une largeur de 200 px.
    • J'ai essayé d'utiliser '200px' mais il n'affiche pas la div, même si j'ai mis le style de la largeur de '0px' il serait toujours afficher la div et juste clignoter à chaque fois que je clique sur les boutons à l'événement onclick.
    • Dans le cas où je n'étais pas clair dans les hypothèses que je faisais pour ce que vous pourriez comprendre, j'ai commencer avec des div en cours de display:none et rien ne se passe lorsque j'essaie de l'ensemble de la largeur de 200px. Alors si je fais la div affiche et essayez de définir la largeur à 0px juste clignote à 0, puis de retour à nouveau à la pleine taille.
    • - Je prendre, vous n'avez plus à se préoccuper de cette.

    InformationsquelleAutor powtac
  3. 1

    Il y a une autre façon, pour l'utilisation de jquery ui. Voir
    l'api de jquery ui
    mais il peut ne pas être toujours utile, car il a ses pépins

    Ici jsfiddle pour voir le problème, il ne bouge pas tout le reste des éléments en douceur.
    Je mets ici le code, mais il doit ê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>
    InformationsquelleAutor Yevgeniy Afanasyev
  4. 0

    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
    /* retourner le volet lors de son survol */
    .flip-conteneur:hover .flipper, .flip-conteneur.passez la souris .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);
}

    je l'utiliser à l'intérieur d'un "bootstrap" col-sm-* et fonctionne 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;
}
    InformationsquelleAutor Alexandre Ribeiro
  5. 0

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

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

    Si vous souhaitez basculer entre les deux la largeur que vous pourriez faire quelque chose comme ci-dessous :

    JS:

    $('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});

    CSS:

    #A{
  float:left;
  width:50%;
  height:300px;
  background:red;
}
#B{
  min-height:300px;
  background:green;
}

    HTML:

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

    InformationsquelleAutor sjsam
  7. -2

    Je voulais la Hauteur à bascule alors j'ai utilisé(j'ai utilisé dans mon projet)

    function show_hide(target){
 var x = document.querySelectorAll("." +target);
 var y = $( x ).next()
 $(y).animate({height: 'toggle'});
}
    • Pourquoi ne pas l'utiliser .slideToggle(), la fonction de la question d'origine est de demander à un vertical de remplacement pour?
    InformationsquelleAutor safeer008