jQuery 淡入()

发布于 2024-07-27 20:01:35 字数 521 浏览 5 评论 0原文

如果淡入淡出时间一到，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() 返回一个“

....

”。

页面加载时，

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

街角迷惘 2024-08-03 20:01:35

我遇到过各种奇怪的问题，jQuery fadeIn() 和 show() 只是弹出而不是动画。看看这样是否效果更好：

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

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

回复收藏 0 原文

鲜血染红嫁衣 2024-08-03 20:01:35

你能尝试取出 hide() 并让我知道它的作用吗？或者也许将 hide() 移至设置 html 之后？无论如何，fadeIn 方法应该自动隐藏它，但值得一试。

另外，您能否提供有关 PostHtml 方法的更多信息？可能是它定义的风格导致了事情的行为变得奇怪。

回复收藏 0 原文

白馒头 2024-08-03 20:01:35

我同意 @Damovisa 的观点，因为我们可以了解 PostHtml 方法的作用 - 如果它执行 Ajax 调用，那么它可能会在 fadeIn 超时到期后完成，因此，淡入淡出效果似乎不起作用。

回复收藏 0 原文

谎言月老 2024-08-03 20:01:35

尝试将 PostHtml(post) 硬编码为

test

。请参见下文：

function ThreadPost(post, appendToElementId) {

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

如果这适用于硬编码的

，那么您就知道是 PostHtml(post) 导致了您的问题。当我进行硬编码时，淡入淡出效果在 IE、FF 和 Chrome 中按预期工作。

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.

回复收藏 0 原文

感受沵的脚步 2024-08-03 20:01:35

您是否尝试过在 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);
    }
}

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

回复收藏 0 原文

~没有更多了~