come funziona jquery fadeIn? Facendo lo stesso con animate()

Mi piace la semplice funzione jQuery fadeIn(), soprattutto perché funziona senza dover impostare alcun valore di opacità per il selettore! Basta impostarlo su display:none e utilizzare fadeIn() funziona sempre.come funziona jquery fadeIn? Facendo lo stesso con animate()

Tuttavia non sto usando jQuery per il mio progetto corrente ma zepto.js. Zepto viene fornito solo con animate() e non con fadeIn().

Mi chiedo come posso creare lo stesso comportamento con la funzione animata! Quali proprietà devo animare qui?

$('#selector').animate({ 
    display: "block", 
    opacity: 1 
}, 500, 'ease-out')

Grazie in anticipo

fonte

2012-08-02 matt

Il .fadeIn() 'funzione probabilmente solo chiama il jQuery' '.animate () 'function, quindi prova a cercarlo nel [codice jQuery] (http://code.jquery.com/jquery-1.7.2.js). –

(function($){ 
     $.extend($.fn, { 
     fadeIn: function(ms){ 
      if(typeof(ms) === 'undefined'){ 
      ms = 250; 
      } 
      $(this).css({ 
      display: 'block', 
      opacity:0 
      }).animate({ 
      opacity: 1 
      }, ms); 
      return this; 
     } 
     }) 
    })(Zepto)

Se Zepto funziona come jQuery $('.example').fadeIn(); dovrebbe fare il trucco.

MODIFICA: Trejder ha ragione, ha regolato le parti.

fonte

2012-08-02 12:48:36 Sem

La tua soluzione sembra ottima, ma in base a ciò che ho letto su Javascript, dovresti usare 'typeof (ms) === 'undefined'', non' ms == undefined' poiché non esiste una tale parola chiave come 'undefined 'in JS e questo (in alcune situazioni certe) può anche essere una variabile con un valore! – trejder

E - ovviamente! - 'display: 'block',', non 'display: block,', dato che 'block' è una variabile non definita (sic!) qui! – trejder

@trejder lo ha risolto! :) – Sem

La funzione jQuery fadeIn è solo una scorciatoia per la funzione di jQuery animare. Tutto ciò cambia l'opacità da 0 a 1 su un periodo di tempo incrementando il valore di opacità.

// Generate shortcuts for custom animations 
jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
});

fonte

2012-08-02 12:43:06 Stieffers

-1

puoi provarlo. Ho fatto una piccola demo. devi renderlo opacità 0, quindi renderlo visualizzato: blocca e poi anima l'opacità.

controllo questo violino http://jsfiddle.net/dTRhQ/

Tuttavia, che è fatto in JQ, spero che tu possa trovare adeguata applicazione nel vostro quadro

fonte

2012-08-02 13:17:18 Shades88

come funziona jquery fadeIn? Facendo lo stesso con animate()

risposta

Problemi correlati