jQuery fadeIn()

Question

What does it mean if fadeIn() goes from an opacity of 0% to 100% as soon as the fade timeperiod is up?

I've got this:

function ThreadPost(post, appendToElementId) {

    if (post != null) {
        $("#" + appendToElementId).append("<ol id='" + post.Id + "'></ol>");
        $("#" + post.Id).hide().html(PostHtml(post)).fadeIn(5000);
    }
}

PostHtml() returns a "<li>....</li>".

When the page loads, the <ol> is hidden. Then, after 5 seconds, the <ol> suddenly appears. No fading occurs. Using Chrome.

Answer 1

Can you try taking out the hide() and let me know what it does? Or perhaps move the hide() to after you set the html? The fadeIn method should hide it automatically anyway, but it's worth a shot.

Also, can you provide any more information about what the PostHtml method does? It could be that it's defining styles that are making things behave strangely.

Answer 2

I agree with @Damovisa in that we could do with knowing what the PostHtml method does - if it does an Ajax call then it might be completing after the fadeIn timeout has expired, hence the fading in effect not appearing to work.

Answer 3

Try hardcoding PostHtml(post) as <li>test</li>. See below:

function ThreadPost(post, appendToElementId) {

    if (post != null) {
        $("#" + appendToElementId).append("<ol id='" + post.Id + "'></ol>");
        $("#" + post.Id).hide().html("<li>test</li>").fadeIn(5000);
    }
}

If that works with the hardcoded <li>, then you know it's PostHtml(post), causing your issue. When I hard code, the fade works as expected in IE, FF, and Chrome.

Answer 4

I've had all kinds of weird issues with jQuery fadeIn() and show() just popping in instead of animating. See if this works better:

$("#" + post.Id).css({opacity: 0.0}).html(PostHtml(post)).animate({opacity: 1.0}, 5000);

Answer 5

Have you tried calling show() right before fadeIn():

function ThreadPost(post, appendToElementId) {

    if (post != null) {
        $("#" + appendToElementId).append("<ol id='" + post.Id + "'></ol>");
        $("#" + post.Id).hide().html(PostHtml(post)).show().fadeIn(5000);
    }
}

or simply get rid of the hide():

function ThreadPost(post, appendToElementId) {

    if (post != null) {
        $("#" + appendToElementId).append("<ol id='" + post.Id + "'></ol>");
        $("#" + post.Id).html(PostHtml(post)).fadeIn(5000);
    }
}