web-dev-qa-db-fra.com

Glisser les divs horizontalement avec JQuery

donc je suis très nouveau pour Javascript et Jquery. Ce que je voudrais créer est une page à deux colonnes où les liens dans la colonne de gauche feront glisser une div à droite horizontalement de gauche à droite et disparaîtront si vous cliquez à nouveau. Je sais que je dois utiliser l’effet de basculement des diapositives, mais j’ai du mal à l’implémenter de manière à ce que chaque lien fasse glisser une div différente. Je suis assez perdu quand il s'agit de javascript. 

Jusqu'ici, c'est le seul violon que j'ai pu Tweak avec succès .... http://jsfiddle.net/bridget_kilgallon/HAQyK/
mais ceux-ci glissent verticalement et chargent toutes les divs quand on clique dessus.

Voici un violon que j'ai créé pour le pagelayout que je voudrais sans javascript ... http://jsfiddle.net/bridget_kilgallon/NhanG/

S'il vous plaît aider! :) -Bridget

jquerytoggleslide
15
Bridget Kilgallon

Malheureusement, il n'y a pas d'animation de diapositives «horizontale» prête à l'emploi avec jQuery. Sauf si vous utilisez des packages plus volumineux tels que l'interface utilisateur jQuery. Mais je ne pense pas que ce soit nécessaire.

La seule chose que vous souhaitiez est une utilisation créative de la fonction animate() dans jQuery pour obtenir un effet.

Je ne savais pas lequel vous voudriez aller car la description était vague, j'ai donc créé deux exemples d'effets mineurs lors du changement de panneau:

http://jsfiddle.net/sg3s/rs2QK/ - Celui-ci glisse le panneau ouvert de gauche à droite

http://jsfiddle.net/sg3s/RZpbK/ - Les panneaux s'ouvrent de gauche à droite et près de la gauche avant d'ouvrir le nouveau.

Ressources:

Vous ne pouvez pas faire cela avec du CSS pur, pas encore. La prise en charge des transitions est basique et limitée aux navigateurs Webkit. Donc, puisque vous allez avoir besoin que jQuery en fasse un usage intelligent, vous devez tout de même vous assurer de styler autant que possible avec css avant d’utiliser JS. Notez que je n’utilise aucun style/manipulation visuel dans mon JS.

35
sg3s

Sans utiliser JavaScript, vous ne pouvez utiliser que les transitions CSS. Et bien que celles-ci soient assez impressionnantes, elles ne sont pas particulièrement bonnes, pour autant que je sache, pour l’animation conditionnelle; ils peuvent essentiellement animer d'un point de départ à un autre, puis revenir (en fonction des événements de navigateur natifs disponibles dans le navigateur lui-même). Avec JS, vous pouvez ajouter/supprimer des classes supplémentaires et laisser les éléments div se déplacer au contenu de votre coeur, mais pas avec 'juste' CSS (bien que j'aimerais beaucoup avoir tort à ce sujet).

Le mieux que j'ai pu faire jusqu'à présent est:

#left {
    float:left;
    width:200px;
}
.right {
    height: 0;
    background-color: #fff;
    margin-left: 205px;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}
.right:target {
    display: block;
    height: 5em;
    background-color: #ffa;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}​

Démo de JS Fiddle .

Et cela ne glisse pas de côté (bien que vous puissiez le faire si vous le souhaitez) car cela ne semblait pas bon, étant donné le contenu rediffusé qui se produisait lorsque la largeur de l'élément change.

Edited parce que je pense avoir mal interprété une partie de la question initiale:

... je voudrais sans javascript

Cela étant, et le commentaire (ci-dessous) semble suggérer que jQuery est une option acceptable, cela peut valoir la peine d'être démontré:

​$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });​​​​​​​​

Démo de JS Fiddle .

Références:

2
David Thomas

Vous pouvez utiliser le module effects de l'interface utilisateur jQuery et utiliser show('slide'). Look http://jsfiddle.net/HAQyK/1/

1
elclanrs

Voici le code que vous voulez ... Il est prouvé que cela fonctionne sur IE, Safari, Chrome, Firefox, etc.

Voici la partie HTML.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Voici la partie jQuery dans la fonction JavaScript.

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

Pour cacher les flèches, veuillez regarder ici. Détecte la fin du défilement horizontal avec jQuery

0
NOTSermsak
$(function () {
$("#wizardV").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
});

* // wizard est un div contenant tout votre contenu

0
Cosii Riggz