web-dev-qa-db-fra.com

jQuery slide gauche et montrer

J'ai étendu les effets jQuery appelés slideRightShow() et slideLeftHide() avec quelques fonctions qui fonctionnent de la même manière que slideUp() et slideDown(), comme indiqué ci-dessous. Cependant, je voudrais aussi implémenter slideLeftShow() et slideRightHide().

Je sais que de nombreuses bibliothèques proposent ce type de choses (j'aimerais éviter d'ajouter un autre grand ensemble de fichiers javascript), mais quelqu'un peut-il donner un exemple simple de la manière d'implémenter 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() {
      ???
    });
  }
});

La fonction slideRightShow ci-dessus commence à afficher l'image du côté gauche et elle progresse vers le côté droit. Je cherche un moyen de faire la même chose en partant du côté droit et en progressant vers la gauche . Merci!

MODIFIER

jQuery Interface a quelque chose comme ce dont j'ai besoin (j'ai essentiellement besoin de leurs fonctions "glisser à droite" et "glisser à gauche"), mais je ne pouvais pas le faire fonctionner avec jQuery 1.3: http: //interface.eyecon .ro/demos/ifx.html . En outre, leur démo semble cassée et ne glisse qu'une fois avant de générer un million d'erreurs.

jqueryeffects
110
Wickethewok

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

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 immédiat pour slideUp() et slideDown().

33
vdboor

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

Remarque: vous pouvez modifier la largeur de l'animation selon votre préférence pour une 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);
    });
}
9
thebhatta

Et si vous souhaitez modifier la vitesse et inclure des rappels, ajoutez-les simplement comme suit:

        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);
                });
            }
        });
5
Steve Grove