当前位置：文江博客话题详情

jQuery fadeOut() 和 fadein() 计时

发布于 2024-12-10 10:40:18 字数 149 浏览 2 评论 0原文

我有一个简单的 jQuery 问题，请查看：http://jsfiddle.net/4Q5uQ/

如何fadeIn() fadeOut() 效果完成后的框？

原文

分享到QQ

分享到微博

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

发布评论

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

多像笑话 2024-12-17 10:40:18

我认为你想要两件事：

褪色的
应该位于同一个位置，这样它们就不会移动。
您想要淡出可见的
，然后淡入另一个
。

第一种方法可以通过将两个

包装在相对定位的

中，然后绝对定位内部


< /code>s：

<div class="wrapper">
    <div id="div_1" data="1" class="box">
        test_1
    </div>
    <div id="div_2" data="2" class="box">
        test_2
    </div>
</div>

并且：

div.wrapper {
    position: relative;
}
div.box {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

第二个只需添加 :visible 给你的fadeOut 选择器：

$(".box:visible").fadeOut(1000, ...

更新的小提琴：http://jsfiddle.net/ambigously/jAP2b/< /a>

I think you want two things:

The fading <div>s should be in the same place so they don't move around.
You want to fade out the visible <div> and then fade in the other <div>.

The first can be done by wrapping the two <div>s in a relatively positioned <div> and then absolutely positioning the inner <div>s:

<div class="wrapper">
    <div id="div_1" data="1" class="box">
        test_1
    </div>
    <div id="div_2" data="2" class="box">
        test_2
    </div>
</div>

And:

div.wrapper {
    position: relative;
}
div.box {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

The second is just a matter of adding :visible to your fadeOut selector:

$(".box:visible").fadeOut(1000, ...

Updated fiddle: http://jsfiddle.net/ambiguous/jAP2b/

回复收藏 0 原文

維他命╮ 2024-12-17 10:40:18

您可能需要以下代码： http://jsfiddle.net/4Q5uQ/5/

$(document).ready(function() {
    $("a").click(function() {
        var fin = $(this).attr('fin');
        var fout = $(this).attr('fout');
        $("#div_" + fout).show();
        $("#div_" + fin).hide();
        $(".box[data=" + fout + "]").fadeOut(4000, function() {
            $(".box[data=" + fin + "]").fadeIn(4000);
        });
    });
});

Following code may be your need: http://jsfiddle.net/4Q5uQ/5/

$(document).ready(function() {
    $("a").click(function() {
        var fin = $(this).attr('fin');
        var fout = $(this).attr('fout');
        $("#div_" + fout).show();
        $("#div_" + fin).hide();
        $(".box[data=" + fout + "]").fadeOut(4000, function() {
            $(".box[data=" + fin + "]").fadeIn(4000);
        });
    });
});

回复收藏 0 原文

~没有更多了~