jQuery scorri a sinistra e mostra


111

Ho esteso gli jQueryeffetti chiamati slideRightShow()e slideLeftHide()con un paio di funzioni che funzionano in modo simile slideUp()e slideDown()come mostrato di seguito. Tuttavia, vorrei anche implementare slideLeftShow()e slideRightHide().

So che ci sono librerie sostanziali che offrono questo tipo di cose (vorrei evitare di aggiungere un altro grande insieme di javascriptfile), ma qualcuno può fornire un semplice esempio di come implementare slideLeftShow()o 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 slideRightShowfunzione precedente inizia a mostrare l'immagine dal lato sinistro e procede verso il lato destro. Sto cercando un modo per fare la stessa cosa ma iniziare dal lato destro e progredire verso sinistra . Grazie!

MODIFICARE

jQuery Interface ha qualcosa del genere di cui ho bisogno (fondamentalmente ho bisogno delle loro funzioni "slide in right" e "slide out left"), ma non sono riuscito a farlo funzionare con jQuery 1.3: http://interface.eyecon.ro/demos /ifx.html . Inoltre, la loro demo sembra non funzionare così come farà solo una diapositiva una volta prima di lanciare un milione di errori.


Ho aggiornato il mio post, spero che questo aiuti
bendewey

Risposte:


185

Questa funzione è inclusa come parte dell'interfaccia utente di jquery http://docs.jquery.com/UI/Effects/Slide se desideri estenderla con i tuoi nomi puoi usarla.

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

avrai bisogno dei seguenti riferimenti

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

Ciao! Sto cercando il contrario di quello che hai implementato lì. Fondamentalmente, quando uso quello che ho sopra per mostrare un elemento, la parte sinistra appare per prima e avanza verso destra. Sto cercando di farlo iniziare dal lato destro e progredire verso sinistra.
Wickethewok

1
funziona se muovi l'elemento a destra. Altrimenti. potresti voler annotare la proprietà sinistra e spostare l'elemento mentre lo riduci.
bendewey

1
Cambiare l'elemento in float "a destra" non ha invertito la diapositiva per me. Ho chiarito sopra se questo aiuta.
Wickethewok

2
Grazie mille! Non sapevo che questo facesse parte degli effetti di jQuery. Darei +2 se potessi!
Wickethewok,


34

Non dimenticare il padding e i margini ...

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

Con l'aggiunta degli argomenti speed / callback, è un completo sostituto di slideUp()e slideDown().


Come possono farli fare lo stesso effetto con lo scorrimento a destra?
Jayant Varshney

@JayantVarshney: assicurati che il blocco sia allineato a destra, possibilmente con un blocco interno. Questo codice riduce solo la larghezza. Se il tuo CSS può gestirlo, avrai una diapositiva corretta
vdboor

Grazie ... Ma voglio entrambi gli effetti sullo stesso div .. come l'apertura da destra a sinistra e poi la chiusura da sinistra a destra o viceversa ...
Jayant Varshney

E allora, che ne dici di cambiare classe al callback di completamento? :-)
vdboor

Grazie, ho usato le animazioni CSS3 per ottenere questa funzionalità
Jayant Varshney

9

Puoi aggiungere una nuova funzione alla tua libreria jQuery aggiungendo queste righe al tuo file di script e puoi facilmente usare fadeSlideRight()e fadeSlideLeft().

Nota: puoi modificare la larghezza dell'animazione a tuo piacimento, istanza di 750 px.

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

1
Questo è esattamente ciò di cui avevo bisogno senza includere jQuery UI. Ho appena aggiunto l'opacità e la larghezza come parametri. ... = function(opacity, speed, width, fn) {...}
Dylan Valade

1
Questa è di gran lunga la soluzione migliore. Non è necessario aggiungere altre librerie. Grazie.
hosseio

5

E se vuoi variare la velocità e includere i callback, aggiungili semplicemente in questo modo:

        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);
                });
            }
        });
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.