Question

In my Rails application I have flash messages and I would like it so that each time there is a flash message, it scrolls down from the top (all the content goes lower) stays for a few seconds and the slides back up.

How can I do this with jQuery?

Do I toggle the height?

Update

Sometimes the message will be injected into the HTML which means that the slideDown won’t work since the DOM has already loaded, how can I have it so jQuery looks for .message and then applies the slideDown and slideUp?

Answer 1

You can make it slide down, wait for couple of seconds and slide back again with this:

$(selector for your message).slideDown(function() {
    setTimeout(function() {
        $(selector for your message).slideUp();
    }, 5000);
});

Change the 5000 to the time you want the message to stay visible in milliseconds.

And remember to set display: none; in CSS for your message, so that it does not appear until jQuery goes in.