Question

我有一个正在显示的图像，过了一会儿就会淡出...我希望隐藏第二个图像，当第一个图像淡出第二个图像时淡入。

<script>
    window.setTimeout(function () {
        $('#fadeout').hide(2000);
    }, 4000);

</script>
<style>

    #Motherboard {
        width: 488px;
        height: 430px;
        background-image: url("img/motherboard.png");
    }
    #Motherboard1 {
        width: 488px;
        height: 430px;
        background-image: url("img/motherboard1.png");      
    }
</style>
<body>
<div id="fadeout">
    <div id="Motherboard1"></div>
</div>
<div id="container">
    <div id="Motherboard"></div>
</div>
</body>

我有第一张图像淡出，我正在努力隐藏，然后显示第二张图像。在id #container中。

有什么建议吗？

由于

Answer 1

如果你想让它们同时开始褪色，那么应该这样做。

window.setTimeout(function () {
        $('#fadeout').hide(2000);
        $('#fadein').show(2000);
    }, 4000);

如果您希望第一张图像完成渐弱，那么第二张图像应该开始消失

window.setTimeout(function () {
        $('#fadeout').hide(2000, function(){
             $('#fadein').show(2000);
        });

    }, 4000);

Answer 2

试试这个

$('#fadeout').hide(2000, function() {
    $('#container').show(2000);
});

假设您希望在第一个图像完全淡出后显示图像。显示在隐藏意义的完整功能内部，当隐藏动画结束时，执行您在完整功能中定义的任何内容。

如果你希望它们同时淡出/淡出，那么你就可以同时做两件事

$('#fadeout').hide(2000);
$('#container').show(2000);

Answer 3

    <html>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        window.setTimeout(function () {
            $('#fadeout').fadeOut(2000);
            $('#container').fadeIn(2000);
        }, 4000);

    </script>
    <style>

        #Motherboard {
            width: 488px;
            height: 430px;
            background-image: url("img/motherboard.png");
        }
        #Motherboard1 {
            width: 488px;
            height: 430px;
            background-image: url("img/motherboard1.png");      
        }
    </style>
    <body>
    <div id="fadeout">
        <div id="Motherboard1"></div>
    </div>
    <div id="container">
        <div id="Motherboard"></div>
    </div>
    </body>
    </html>

尝试此代码..您的脚本将正常工作

如何隐藏图像并使其显示在计时器上。

3 个答案: