jQuery nach links schieben und anzeigen

111

Ich erweiterte die jQueryEffekte genannt slideRightShow()und slideLeftHide()mit ein paar Funktionen , dass die Arbeit ähnlich slideUp()und slideDown()wie unten zu sehen. Allerdings würde Ich mag auch implementieren slideLeftShow()und slideRightHide().

Ich weiß, dass es umfangreiche Bibliotheken gibt, die diese Art von Dingen anbieten (ich möchte vermeiden, einen weiteren großen Satz von javascriptDateien hinzuzufügen ), aber kann jemand ein einfaches Beispiel für die Implementierung von entweder slideLeftShow()oder geben slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

Die obige slideRightShowFunktion zeigt das Bild von der linken Seite an und geht zur rechten Seite. Ich suche nach einer Möglichkeit, dasselbe zu tun, aber beginne von der rechten Seite und gehe nach links . Vielen Dank!

BEARBEITEN

jQuery Interface hat so etwas wie das, was ich brauche (ich brauche im Grunde die Funktionen "rechts einschieben" und "links herausschieben"), aber ich konnte dies nicht mit jQuery 1.3 zum Laufen bringen : http://interface.eyecon.ro/demos /ifx.html . Außerdem scheint ihre Demo kaputt zu sein, da sie nur einmal eine Folie erstellt, bevor eine Million Fehler ausgegeben werden.

Wickethewok
quelle
Ich habe meinen Beitrag aktualisiert. Ich hoffe, das hilft
Bendewey
Siehe auch
Timo Huovinen

Antworten:

185

Diese Funktion ist Teil von jquery ui http://docs.jquery.com/UI/Effects/Slide. Wenn Sie sie mit Ihren eigenen Namen erweitern möchten, können Sie sie verwenden.

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

Sie benötigen die folgenden Referenzen

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
Bendewey
quelle
Hallo! Ich suche das Gegenteil von dem, was Sie dort implementiert haben. Wenn ich das, was ich oben habe, verwende, um ein Element anzuzeigen, wird der linke Teil grundsätzlich zuerst angezeigt und geht nach rechts. Ich versuche, es von rechts zu starten und nach links zu bringen.
Wickethewok
1
Es funktioniert, wenn Sie das Element nach rechts schweben lassen. Andernfalls. Möglicherweise möchten Sie die linke Eigenschaft annimieren und das Element beim Verkleinern verschieben.
Bendewey
1
Das Ändern des Elements auf "rechts" hat die Folie für mich nicht umgekehrt. Ich habe oben klargestellt, ob das hilft.
Wickethewok
2
Ich danke dir sehr! Ich wusste nicht, dass dies Teil der Effekte von jQuery ist. Ich würde +2 geben, wenn ich könnte!
Wickethewok
4
Der Link der Quelle der beiden UI- Skripte lautet jetzt: jquery-ui.googlecode.com/svn/tags/latest/ui/… und " jquery-ui.googlecode.com/svn/tags/latest/ui/…
Muleskinner"
34

Vergessen Sie nicht die Polsterung und die Ränder ...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

Mit den hinzugefügten Geschwindigkeits- / Rückrufargumenten ist dies ein vollständiger Ersatz für slideUp()und slideDown().

vdboor
quelle
Wie können sie den gleichen Effekt mit dem richtigen Gleiten erzielen?
Jayant Varshney
@ JayantVarshney: Stellen Sie sicher, dass der Block rechtsbündig ist, möglicherweise mit einem inneren Block. Dieser Code verkleinert nur die Breite. Wenn Ihr CSS damit umgehen kann, haben Sie eine rechte Folie
vdboor
Danke ... Aber ich möchte beide Effekte auf dasselbe Div ... wie von rechts nach links öffnen und dann von links nach rechts schließen oder umgekehrt ...
Jayant Varshney
Wie wäre es dann mit einem Klassenwechsel beim Rückruf? :-)
vdboor
Vielen Dank, ich habe CSS3-Animationen verwendet, um diese Funktionalität zu erreichen
Jayant Varshney
9

Sie können durch das Hinzufügen dieser Zeile auf eigene Skriptdatei neue Funktion , um Ihre jQuery - Bibliothek hinzufügen , und Sie können leicht verwenden fadeSlideRight()und fadeSlideLeft().

Hinweis: Sie können die Breite der Animation ändern, wenn Sie eine Instanz von 750px mögen.

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}
thebhatta
quelle
1
Dies ist genau das, was ich brauchte, ohne die jQuery-Benutzeroberfläche einzuschließen. Fügte gerade die Deckkraft und Breite als Parameter hinzu. ... = function(opacity, speed, width, fn) {...}
Dylan Valade
1
Dies ist bei weitem die beste Lösung. Es müssen keine weiteren Bibliotheken hinzugefügt werden. Danke dir.
Hosseio
5

Und wenn Sie die Geschwindigkeit variieren und Rückrufe einschließen möchten, fügen Sie sie einfach folgendermaßen hinzu:

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });
Steve Grove
quelle