jQuery glisser à gauche et montrer

Question

J'ai prolongé l' jQuery effets en slideRightShow() et slideLeftHide() avec un couple de fonctions qui fonctionnent de la même façon à l' slideUp() et slideDown() comme on le voit ci-dessous. Cependant, je voudrais aussi mettre en oeuvre slideLeftShow() et slideRightHide().

Je sais il y a des bibliothèques qui offrent ce type de chose (je voudrais éviter d'ajouter un autre grand ensemble de javascript fichiers), mais quelqu'un peut-il fournir un exemple simple de la façon de mettre en œuvre, soit slideLeftShow() ou 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() {
      ???
    });
  }
});

Le ci-dessus slideRightShow fonction commence à montrer de l'image sur le côté gauche et il progresse vers le côté droit. Je suis à la recherche d'une certaine façon de faire la même chose mais à partir de la droite et des progrès accomplis vers la gauche. Merci!

MODIFIER

jQuery Interface a quelque chose que j'ai besoin (en gros, j'ai besoin de leur "glisser" et de "glisser" de gauche"), mais je ne pouvais pas obtenir que cela fonctionne avec jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Aussi, leur démo semble cassé aussi bien qu'il le fera seulement un glisser une fois avant de se jeter d'un million d'erreurs.

Answer 1

Cette fonctionnalité est incluse dans l'interface utilisateur de jquery 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>
 

Answer 2

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 vitesse / rappel ajoutés, il s'agit d'un remplacement complet pour slideUp() et slideDown() .

Answer 3

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

Remarque: vous pouvez modifier la largeur de l'animation en fonction de l'instance de 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

Et si vous voulez 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);
                });
            }
        });