jQuery glisse vers la gauche et montre

J'ai étendu les jQueryeffets appelés slideRightShow()et slideLeftHide()avec des fonctions de couple qui fonctionnent comme slideUp()et slideDown()comme on le voit ci - dessous. Cependant, je voudrais également mettre en œuvre slideLeftShow()et slideRightHide().

Je sais qu'il existe d'importantes bibliothèques qui offrent ce type de chose (j'aimerais éviter d'ajouter un autre grand ensemble de javascriptfichiers), mais quelqu'un peut-il fournir un exemple simple de la façon de mettre en œuvre l'un slideLeftShow()ou l' autre 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() {
      ???
    });
  }
});

La slideRightShowfonction ci-dessus commence à afficher l'image du côté gauche et progresse vers le côté droit. Je cherche un moyen de faire la même chose mais de commencer par le côté droit et de progresser vers la gauche . Merci!

ÉDITER

L'interface jQuery a quelque chose comme j'en ai besoin (j'ai essentiellement besoin de leurs fonctions "slide in right" et "slide out left"), mais je n'ai pas pu faire fonctionner cela avec jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . De plus, leur démo semble cassée et elle ne fera qu'une seule diapositive avant de lancer un million d'erreurs.

Cette fonctionnalité est incluse dans jquery ui http://docs.jquery.com/UI/Effects/Slide si vous souhaitez l'étendre avec vos propres noms, vous pouvez l'utiliser.

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

vous aurez besoin des références suivantes

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

N'oubliez pas le rembourrage et les marges ...

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

Avec les arguments speed / callback ajoutés, c'est un remplacement complet pour slideUp()et slideDown().

Vous pouvez ajouter une nouvelle fonction à votre bibliothèque jQuery en ajoutant ces lignes sur votre propre fichier de script et vous pouvez facilement utiliser fadeSlideRight()et fadeSlideLeft().

Remarque: vous pouvez modifier la largeur de l'animation comme vous le souhaitez une instance de 750 pixels.

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

Et si vous souhaitez faire varier la vitesse et inclure des rappels, ajoutez-les simplement comme ceci:

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