¿Cómo obtener este efecto de desvanecimiento y deslizamiento?

Question

me pregunto cómo pude hacer un fundido y el efecto de diapositivas como en: http://www.apple.com/stevejobs/

Es una animación muy fresco y me pregunto si esto es posible con jQuery?

Nota: Ya sé cómo desvanecerse en las cosas. Uso jQuery todo el tiempo. Quiero el efecto donde los nuevos comentarios/recuerdos/pensamientos caen. Se desliza hacia abajo y se desvanece al mismo tiempo.

Answer 1

El desvanecimiento es sólo un poco de CSS se aplican sobre un elemento:

De mensajes. css (línea 81)

#messages #messageContainer #mask { 
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, #FFFFFF 92%, #FFFFFF 100%) repeat scroll 0 0 transparent; 
    bottom: 0; 
    height: 200px; 
    pointer-events: none; 
    position: absolute; 
    width: 100%; 
    z-index: 1; 
} 

y para el efecto de desplazamiento, se puede hacer fácilmente con jQuery.

edición: los elementos no están desvaneciendo, van detrás de un elemento que es un gradiente de transparente a blanco

Answer 2

Depende de qué parte de lo que quieres! jQuery puede hacer todo, algunos son más difíciles que otros. Eche un vistazo a los métodos fadeIn y fadeOut. Los comentarios que caen por un nivel se pueden hacer con el método animado.

editado basa en su comentario en otra respuesta:

Puede agarrar todos los elementos que desea mover hacia abajo y luego utilizar el método animado en él. Haga lo siguiente:

1. Posición todos los elementos de tal manera que el primero está oculto
2. fadeIn todos los elementos excepto el primero $ ("Selector:. No (: primeros)")
3. Slide todos los elementos abajo mientras se desvanece con el método animado(), el fundido se ignorará para todos los elementos visibles
4. Cargue el siguiente elemento donde estaba el primero, repita.

Answer 3

Usted puede usar jQuery fadeIn efecto

$(selector).fadeIn('slow', function() {}) 

http://api.jquery.com/fadeIn/

jsFiddle: http://jsfiddle.net/ckTRh/

Answer 4

Working Example

Básicamente usted tiene que fijar el elemento de " casi invisible "con opacity de 0.001 para obtener la diapositiva para que funcione y luego use fadeTo para traerla de vuelta a 1, que está completamente visible.

$(function() { 

    $('#button').click(function() { 
     // new element to be added to top of list hidden 
     var $new_li = $('<li style="display:none;">New Item</li>'); 

     // make element "almost" invisible 
     $new_li.css('opacity', '0.001'); 

     // add it to list 
     $('.list').prepend($new_li); 

     // slide the "almost" invisible element down 
     // (shifting all others down) 
     $new_li.slideDown('slow', function() { 

      //once done sliding, trigger fade 
      $new_li.fadeTo('slow',1); 
     }); 
    }); 
});