I'm wondering how I could make a fade and slide effect like on: /

It's a really cool animation and I'm wondering if this is possible with jQuery?

Note: I already know how to fade in stuff. I use jQuery all the time. I want the effect where new ments/memories/thoughts drop down. It slides down and fades at the same time.

I'm wondering how I could make a fade and slide effect like on: http://www.apple./stevejobs/

It's a really cool animation and I'm wondering if this is possible with jQuery?

Note: I already know how to fade in stuff. I use jQuery all the time. I want the effect where new ments/memories/thoughts drop down. It slides down and fades at the same time.

• javascript
• jquery
• fade
• slide

4 Answers 4

The fading is just some CSS they applied on an element:

From messages.css (line 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;
}

and for the scrolling effect, it can be done easily with jQuery.

edit: the elements are not fading away, they're going behind an element which is a gradient from transparent to white

Working Example

Basically you have to set the element to "almost invisible" with an opacity of 0.001 to get the slide to function and then use fadeTo to bring it back into 1, which is pletely 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);
        });
    });
});

Depends on what part of it you want! jQuery can do all of it, some is harder than others. Take a look into the fadeIn and fadeOut methods. The ments falling down a level can be done with the animate method.

Edited based on your ment on another answer:

You can grab all of the elements you want to move down then use the animate method on it. Do the following:

1. Position all items such that the first one is hidden
2. Fadein all elements except the first one $(".selector:not(:first)")
3. Slide all elements down while fading in with the animate() method, the fade will be ignored for all visible elements
4. Load the next item where the first was, repeat.

You can use jQuery fadeIn effect

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

http://api.jquery./fadeIn/

jsFiddle: http://jsfiddle/ckTRh/