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

How do i hide an image and make it appear on a timer.

本文关键字：显示 计时器 图像 何隐藏 隐藏      更新时间：2023-09-26

我有一张正在显示的图像，过了一段时间它就会淡出。。。我希望第二个图像被隐藏，当第一个图像淡出时，第二个图片淡入。

<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为#的容器。

有什么建议吗？

感谢

如果你想让它们同时开始衰落，那么下面就可以了。

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

如果你想让第一张图片淡出，然后第二张开始淡出，然后

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

试试这个

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

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

如果你想让它们同时淡出/进入，那么你只需要同时做这两件事

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

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

请尝试此代码。。您的脚本将工作

相关文章：