Question

我正试图淡出一个div，然后淡入另一个div，这对我有用，问题是我无法延迟它，所以第一个div不会推动另一个div ...

这是我的HTML（一切都是内联的）：

<!doctype html>
<html>
    <head>
        <title>JavaScript popup</title>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="main.js" type="text/javascript"></script>
    </head>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".main").hide();
        });
        $("#continue-button").click(function(){
            $(".vge-eksponering").hide();
            $(".main").show();      
        });        
    </script>
    
    <body style="background-color:lightgrey;">
        <div class="vge-eksponering" style="text-align:center;">
            <h1>Tjek VGEs hjemmeside ud på:
            <br>
            <a href="http://www.vge.dk" target="_blank">www.vge.dk</a></h1>
            <button id="continue-button" style="font-size:2em;">Fortsæt til VGE News</button>
        </div>
        <script>
            $("#continue-button").click(function(){
                $(".vge-eksponering").fadeOut(1200);
                $(".main").fadeIn(1200);
            });  
        </script>
        <div class="main" style="background-color:lightblue;">
            <h1>JavaScript popup</h1>
            <p>Hopefully this will work soon...</p>
        </div>
    </body>
</html>

编辑：我用过这个，但它确实有效。

$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);

Answer 1

您（至少）有两个选择：

如果只有一个.vge-eksponering元素，则使用完成回调fadeOut为您提供：

$(".vge-eksponering").fadeOut(1200, function() {
    $(".main").fadeIn(1200);
});

或者只使用delay，其值等于第一个fadeOut：

$(".vge-eksponering").fadeOut(1200);
$(".main").delay(1200).fadeIn(1200);

Answer 2

使用setInterval

setInterval(function() {
  $(".main").fadeIn(1200);
}, 1200);

关于setInterval http://www.w3schools.com/jsref/met_win_setinterval.asp

的教程

jQuery .fadeOut然后等待，然后.fadeIn不起作用

2 个答案: