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

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

javascript jquery html css

Javascript 如何隐藏图像并使其显示在计时器上。,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个正在显示的图像，过了一段时间它就会消失。。。我希望第二个图像被隐藏，当第一个图像淡出时，第二个图像淡入 <script> window.setTimeout(function () { $('#fadeout').hide(2000); }, 4000); </script> <style> #Motherboard { width: 488px; height: 430px;

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

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


setTimeout（函数（）{
$（#fadeout'）。隐藏（2000年）；
}, 4000);
#主板{
宽度：488px；
高度：430px；
背景图片：url（“img/motherboard.png”）；
}
#主板1{
宽度：488px；
高度：430px；
背景图片：url（“img/motherboard1.png”）；
}

我的第一个图像逐渐消失，我正在努力隐藏，然后显示第二个图像。在具有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);


setTimeout（函数（）{
$（#fadeout'）。fadeout（2000年）；
$（#container'）。fadeIn（2000年）；
}, 4000);
#主板{
宽度：488px；
高度：430px；
背景图片：url（“img/motherboard.png”）；
}
#主板1{
宽度：488px；
高度：430px；
背景图片：url（“img/motherboard1.png”）；
}

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

查看.hide（）的回调。检查是否需要在第一个图像上隐藏的完整函数中淡入第二个图像。基本结构

$（“#淡出”）.hide（2000，function（）{//do something}）

示例在jquery文档页面上，向下滚动我希望第二个图像最初是隐藏的，尽管第一个。。。然后在第一张图像淡出的同时淡入。在上述任一示例之前使用

hide（）

。例如，

$（'fadein'）.hide（）；//代码的其余部分

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