¿Cómo funciona jquery fadeIn? Hacer lo mismo con animate()

Me encanta la función simple jQuery fadeIn(), especialmente porque funciona sin tener que establecer ningún valor de opacidad para el selector. Simplemente configurándolo en display:none y usando fadeIn() siempre funciona.¿Cómo funciona jquery fadeIn? Hacer lo mismo con animate()

Sin embargo, no estoy usando jQuery para mi proyecto actual, pero zepto.js. Zepto solo viene con animate() y no con fadeIn().

¡Me pregunto cómo puedo crear el mismo comportamiento con la función animada! ¿Qué propiedades tengo que animar aquí?

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

gracias de antemano

Fuente

2012-08-02 matt

El '.fadeIn()' probable función sólo llama a la jQuery '.animate () 'función, así que intente buscarlo en el [código 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)

Si Zepto funciona como jQuery $('.example').fadeIn(); debe hacer el truco.

EDITAR: Trejder tiene razón, ajustó las piezas.

Fuente

2012-08-02 12:48:36 Sem

Su solución se ve muy bien, pero de acuerdo con lo que he leído sobre Javascript, debería usar 'typeof (ms) === 'undefined'', no' ms == undefined' ya que no existe una palabra clave como 'undefined 'en JS y esto (en ciertas situaciones) incluso puede ser una variable con un valor! – trejder

¡Y, por supuesto! - 'display: 'block',', not 'display: block,', como 'block' es una variable indefinida (sic!) aquí! – trejder

@trejder lo arregló! :) – Sem

La función jQuery fadeIn es sólo un acceso directo a la función jQuery animar. Todo lo que hace cambia la opacidad de 0 a 1 en un período de tiempo al incrementar el valor de opacidad.

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

Fuente

2012-08-02 12:43:06 Stieffers

-1

puede probar esto. Hice una pequeña demostración. debe hacer que sea opacidad 0, luego hacer que muestre: bloquear y luego animar la opacidad.

cheque este violín http://jsfiddle.net/dTRhQ/

Sin embargo, esto se hace en JQ, espero que puede encontrar aplicación adecuada en su marco

Fuente

2012-08-02 13:17:18 Shades88

¿Cómo funciona jquery fadeIn? Hacer lo mismo con animate()

Respuesta

Cuestiones relacionadas