CODEWITHSUNDEEP
javascriptjqueryfadein
core
core

Reputation: 33059

jQuery fadeIn()

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.

Upvotes: 0

Views: 1466

Answers (5)

Philippe Leybaert
Philippe Leybaert

Reputation: 171734

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

Upvotes: 0

Augustus
Augustus

Reputation: 294

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);

Upvotes: 2

Mike Munroe
Mike Munroe

Reputation: 846

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.

Upvotes: 1

Ian Oxley
Ian Oxley

Reputation: 11056

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.

Upvotes: 1

Damovisa
Damovisa

Reputation: 19423

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.

Upvotes: 1

Related Questions