it-swarm.com.de

Divs horizontal mit JQuery verschieben

ich bin also sehr neu bei Javascript und Jquery. Was ich gerne erstellen würde, ist eine zweispaltige Seite, auf der durch Links in der linken Spalte ein Div rechts von horizontal nach links und rechts verschoben wird, und wenn Sie erneut darauf klicken, wird es aus dem Blickfeld gerollt. Ich weiß, dass ich den Slide-Toggle-Effekt verwenden muss, aber ich habe Probleme bei der Implementierung, so dass jeder einzelne Link ein anderes div zum Slide veranlasst ... Ich habe versucht, einige jsfiddles zu optimieren, die ich über Google-Suchen gefunden habe Ich bin ziemlich verloren, wenn es um Javascript geht. 

Bis jetzt ist dies die einzige Geige, die ich erfolgreich tweaken konnte. http://jsfiddle.net/bridget_kilgallon/HAQyK/
Diese werden jedoch vertikal verschoben und laden alle Divs, wenn Sie darauf klicken.

Hier ist eine Geige, die ich für das Seitenlayout erstellt habe, das ich ohne Javascript verwenden möchte ... http://jsfiddle.net/bridget_kilgallon/NhanG/

Bitte helfen :) -Bridget

15

Leider gibt es mit jQuery keine fertigen horizontalen Animationen. Es sei denn, Sie verwenden größere Pakete wie die jQuery-Benutzeroberfläche. Aber ich denke nicht, dass das nötig ist.

Das einzige, was Sie wollen, ist eine kreative Verwendung der Funktion animate() in jQuery, um einen Effekt zu erzielen.

Ich wusste nicht, mit wem Sie gerne arbeiten würden, da die Beschreibung vage war. Deshalb habe ich zwei Beispiele für geringfügige Effekte beim Panelwechsel gemacht:

http://jsfiddle.net/sg3s/rs2QK/ - Dieses Fenster wird von links nach rechts und nach rechts geschlossen

http://jsfiddle.net/sg3s/RZpbK/ - Die Panels lassen sich von links nach rechts und nach links schließen, bevor sie das neue öffnen.

Ressourcen:

Mit reinem CSS ist das noch nicht möglich. Die Unterstützung für Übergänge ist grundlegend und auf praktisch nur Webkit-basierte Browser beschränkt. Da Sie jQuery daher intelligent einsetzen müssen, müssen Sie dennoch sicherstellen, dass Sie mit css so viel wie möglich gestalten, bevor Sie den JS verwenden. Bitte beachten Sie, dass ich in meinem JS keine visuellen Formen/Manipulationen verwende.

35
sg3s

Wenn Sie kein JavaScript verwenden, können Sie nur CSS-Übergänge verwenden, sofern verfügbar. Und obwohl diese ziemlich beeindruckend sind, sind sie, soweit ich bisher herausgefunden habe, nicht besonders gut für bedingte Animationen; Sie können im Grunde von einem Ausgangspunkt zu einem anderen Punkt animiert werden und dann zurück (basierend auf den im Browser selbst verfügbaren nativen Browserereignissen). Mit JS können Sie zusätzliche Klassen hinzufügen/entfernen und die div-Elemente nach Herzenslust verschieben Nicht mit "nur" CSS (obwohl ich gerne falsch sein würde).

Das Beste, was ich bisher finden konnte, ist:

#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 Demo .

Und das gleitet nicht von der Seite (obwohl Sie das tun können, wenn Sie möchten), weil es nicht gut aussieht, wenn der Inhalt erneut reflow ist, wenn sich die Breite des Elements geändert hat.


Editiert, weil ich denke, dass ich einen Teil der ursprünglichen Frage falsch interpretiert habe:

... ich möchte ohne Javascript

Wenn dies der Fall ist, und der Kommentar (unten) scheint darauf hinzudeuten, dass jQuery eine in Ordnung ist, kann sich dies als Demonstration lohnen:

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

Verweise:

2
David Thomas

Sie können das Modul effects von der jQuery-Benutzeroberfläche aus verwenden und show('slide') verwenden. Look http://jsfiddle.net/HAQyK/1/

1
elclanrs

Hier ist der Code, den Sie wollen . Es ist bewiesen, dass er auf IE, Safari, Chrome, Firefox usw. funktioniert.

Hier ist der HTML-Teil.

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

Hier ist der jQuery-Teil in der JavaScript-Funktion.

       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());
            });
        }
       }

Um die Pfeile zu verbergen, suchen Sie bitte hier. Ende des horizontalen Bildlaufs mit jQuery erkennen

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

Der Assistent ist ein Div, der alle Inhalte enthält

0
Cosii Riggz