Come ottenere questo effetto dissolvenza e scorrimento?

Question

Mi chiedo come fare un effetto dissolvenza e diapositiva come su: http://www.apple.com/stevejobs/

È un'animazione davvero fantastica e mi chiedo se è possibile con jQuery?

Nota: so già come svanire. Io uso sempre jQuery. Voglio l'effetto dove cadono nuovi commenti/ricordi/pensieri. Scivola e svanisce allo stesso tempo.

Answer 1

La dissolvenza è solo un po 'di CSS hanno applicato su un elemento:

dai messaggi. css (riga 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; 
} 

e per l'effetto di scorrimento, può essere fatto facilmente con jQuery.

edit: gli elementi non stanno scomparendo, che stanno andando dietro ad un elemento che è un gradiente da trasparente a bianco

Answer 2

Dipende da quale parte di esso si desidera! jQuery può fare tutto questo, alcuni è più difficile di altri. Dai un'occhiata ai metodi fadeIn e fadeOut. I commenti che cadono su un livello possono essere fatti con il metodo animato.

a cura, sulla base di un commento su un'altra risposta:

Si possono prendere tutti gli elementi che si desidera spostare verso il basso quindi utilizzare il metodo animato su di esso. Effettuare le seguenti operazioni:

1. posizione tutti gli elementi in modo tale che il primo è nascosta
2. FadeIn tutti gli elementi tranne il primo $ ("selettore:. Non (: first)")
3. diapositive tutti gli elementi verso il basso mentre si dissolve con il metodo animate(), la dissolvenza verrà ignorata per tutti gli elementi visibili
4. Carica l'elemento successivo in cui era il primo, ripeti.

Answer 3

È possibile utilizzare effetto jQuery fadeIn

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

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

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

Answer 4

Working Example

In pratica dovete impostare l'elemento su " quasi invisibile "con uno 0.0010.001 per far funzionare la diapositiva e quindi utilizzare fadeTo per riportarlo in 1, che è completamente visibile.

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