jQuery fadeIn ()

Question

Что это означает, если fadeIn () изменяется с непрозрачности от 0% до 100%, как только время затухания истекло?

У меня есть это:

function ThreadPost(post, appendToElementId) {

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

PostHtml () возвращает «<li>....</li>».

Когда страница загружается, <ol> скрыт. Затем, через 5 секунд, внезапно появляется <ol>. Выцветание не происходит. Использование Chrome.

Answer 1

У меня были всевозможные странные проблемы с jQuery fadeIn () и show (), которые просто появлялись вместо анимации. Посмотрите, работает ли это лучше:

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

Answer 2

Я согласен с @Damovisa в том, что мы могли бы знать, что делает метод PostHtml - если он вызывает Ajax, то он может завершиться после истечения времени ожидания fadeIn следовательно, затухание фактически не проявляется.

Answer 3

Попробуйте жестко закодировать PostHtml (post) как <li>test</li>. Смотри ниже:

function ThreadPost(post, appendToElementId) {

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

Если это работает с жестко закодированным <li>, то вы знаете, что это PostHtml (post), вызывая вашу проблему. Когда я жестко программирую, затухание работает, как ожидается, в IE, FF и Chrome.

Answer 4

Можете ли вы попробовать достать hide() и дать мне знать, что он делает? Или, возможно, переместить hide() после того, как вы установите HTML? В любом случае метод fadeIn должен автоматически его скрывать, но его стоит попробовать.

Кроме того, можете ли вы предоставить больше информации о том, что делает метод PostHtml? Возможно, именно определяющие стили заставляют вещи вести себя странно.

Answer 5

Вы пытались вызвать show () прямо перед fadeIn ():

function ThreadPost(post, appendToElementId) {

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

или просто избавьтесь от шкуры ():

function ThreadPost(post, appendToElementId) {

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