如何淡入淡出？

Question

Suppose I use JQuery to do an ajax call, and the result is returned in HTML.

I want to add this result to my current page.

$("#tweets").prepend(result);

result is a string of html code.

This works. However, it just appears. I want it to fadeIn(400). How can I make it fade in?

Answer 1

Make the HTML hidden by default. If you tell the browser to fade in an element that is already shown, it'll do nothing (which is what you're experiencing).

For example, you could wrap the result HTML in a div tag with the class ResponseData. Then, in CSS, you could add this rule:

div.ResponseData
{
    display: none;
}

Now, as soon as that data is prepended into the tweets area, it'll be hidden. Then, your fadein call will work as desired.

Your Javascript would look something like this:

$("#tweets").prepend(result);
$("div.ResponseData").fadeIn();