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

您可以尝试取出hide()并让我知道它的作用吗？或者在设置html后将hide()移动到？ fadeIn方法无论如何都应该自动隐藏它，但它值得一试。

另外，您是否可以提供有关PostHtml方法的更多信息？它可能是因为它定义的风格使得事情表现得很奇怪。

Answer 3

我同意@Damovisa，因为我们可以知道 PostHtml 方法的作用 - 如果它进行了Ajax调用，那么它可能会在 fadeIn 超时后完成已经过期，因此褪色实际上看起来不起作用。

Answer 4

尝试将PostHtml（帖子）硬编码为<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（帖子），导致你的问题。当我硬编码时，淡入淡出在IE，FF和Chrome中按预期工作。

Answer 5

您是否尝试在fadeIn（）之前调用show（）：

function ThreadPost(post, appendToElementId) {

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

或简单地摆脱hide（）：

function ThreadPost(post, appendToElementId) {

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

jQuery fadeIn（）

5 个答案: