jQuery Folie links und zeigen

Question

Ich erweiterte die jQuery Effekte namens slideRightShow() und slideLeftHide() mit ein paar Funktionen, die ähnlich wie slideUp() und slideDown() arbeiten, wie unten zu sehen. Ich möchte aber auch gerne slideLeftShow() und slideRightHide() implementieren.

ich weiß, gibt es erhebliche Bibliotheken, die diese Art der Sache bieten (ich möchte das Hinzufügen eines weiteren großen Satzes von javascript Dateien vermeiden), kann aber ein einfaches Beispiel für jedermann zur Verfügung stellen, wie entweder slideLeftShow() oder slideRightHide() zu implementieren?

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 slideRightShow Funktion beginnt das Bild von der linken Seite zeigt, und Fortschreiten in Richtung der rechten Seite. Ich bin auf der Suche nach einer Möglichkeit, das gleiche zu tun, aber von der rechten Seite und dem Fortschritt auf der linken Seite. Vielen Dank!

EDIT

jQuery-Schnittstelle hat so etwas wie ich brauche (ich ihre „slide in Recht“ im Grunde braucht, und „schieben Sie links“ Funktionen), aber ich konnte dies mit jQuery 1.3 arbeitet nicht bekommen: http://interface.eyecon.ro/demos/ifx.html. Auch scheint ihre Demo so gut zu sein, dass sie nur eine Folie macht, bevor sie eine Million Fehler verursacht.

Answer 1

Diese Funktion ist als Teil von jquery ui http://docs.jquery.com/UI/Effects/Slide enthalten, wenn Sie es mit Ihren eigenen Namen erweitern möchten, können Sie dies 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 müssen 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> 

Answer 2

Sie die Polsterung und Margen nicht vergessen ...

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 der Geschwindigkeit/Rückruf Argumenten hinzugefügt, es ist ein kompletter Tropfen als Ersatz für slideUp() und slideDown().

Answer 3

Sie können Ihrer jQuery-Bibliothek neue Funktionen hinzufügen, indem Sie diese Zeile in Ihre eigene Skriptdatei einfügen, und Sie können einfach fadeSlideRight() und fadeSlideLeft() verwenden.

Hinweis: Sie können die Breite der Animation ändern, wie Sie möchten, Instanz von 750px.

$.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); 
    }); 
} 

Answer 4

Und wenn Sie die Geschwindigkeit variieren wollen und schließen Rückrufe einfach fügen Sie sie wie folgt aus:

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