Question Glisser les divs horizontalement avec JQuery


donc je suis très nouveau sur Javascript et Jquery. Ce que je souhaite créer, c’est une page à deux colonnes où les liens de la colonne de gauche entraînent un div sur la droite pour glisser horizontalement de gauche à droite et disparaître lorsque vous cliquez à nouveau. Je sais que je dois utiliser l'effet slide toggle mais j'ai du mal à l'implémenter de manière à ce que chaque lien fasse glisser une div différente ... J'ai essayé de modifier quelques jsfiddles que j'ai trouvés via les recherches google mais Je suis assez perdu en javascript.

Jusqu'à présent, c'est le seul violon que j'ai pu modifier avec succès ...   http://jsfiddle.net/bridget_kilgallon/HAQyK/
mais ceux-ci coulissent verticalement, et chargent tous 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


13
2018-03-25 21:38


origine


Réponses:


Malheureusement, jQuery ne propose aucune animation de diapositives prête à l'emploi. A moins que vous n'utilisiez de plus gros paquets comme l'interface utilisateur de jQuery. Mais je ne pense pas que ce soit nécessaire.

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

Je ne savais pas avec lequel vous vouliez aller puisque la description était vague alors j'ai fait 2 exemples pour des effets mineurs dans la commutation 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 de toute façon. Le support des transitions est basique et limité aux navigateurs Webkit. Donc, comme vous allez avoir besoin de jQuery, utilisez-le intelligemment, mais vous devez vous assurer que vous utilisez le plus de style possible avec css avant d'utiliser JS. Notez que je n'utilise aucun style / manipulation visuel dans mon JS.


34
2018-03-25 22:25



Sans JavaScript, vous êtes limité à utiliser les transitions CSS, le cas échéant. Et bien que celles-ci soient assez impressionnantes, elles ne sont pas particulièrement grandes, pour autant que je les ai encore trouvées, pour l’animation conditionnelle; ils peuvent en principe animer depuis un point de départ vers un autre point, puis revenir (en fonction des événements du navigateur natif disponibles dans le navigateur lui-même), avec JS, vous pouvez ajouter / supprimer des classes supplémentaires et div les éléments se déplacent vers le contenu de votre cœur, mais pas avec le CSS (juste si je me trompe).

Le mieux que j'ai pu trouver 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;
}​

JS Fiddle démo.

Et cela ne glisse pas du côté (bien que vous puissiez le faire si vous le souhaitez), car cela ne semblait pas bon, compte tenu de la redistribution du contenu à mesure que la largeur de l'élément changeait.


Édité parce que je pense que j'ai peut-être 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 bonne option, cela pourrait être une démonstration intéressante:

​$('#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);
        }
    });​​​​​​​​

JS Fiddle démo.

Les références:


2
2018-03-25 21:52



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


1
2018-03-25 21:42



Voici le code que vous voulez. C'est prouvé que ça marche 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étecter fin de défilement horizontal avec jQuery


0
2018-02-20 17:12



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

* // l'assistant est un div contenant tout votre contenu


0
2018-03-14 10:00