jQuery Fade延迟

Question

一个简单的问题，为什么这段代码不起作用？

<script>
function test( jQuery ){
 $("#fade").delay(500).fadeIn(4000);
 $("#fade2").delay(500).fadein(4000);
}
$( document ).ready( test );
</script>

请记住，我是jQuery新手

谢谢

Answer 1

我能想到的唯一可能的原因是元素最初并未被隐藏-若要使fadeIn（）起作用，必须首先隐藏元素。

所以要么使用脚本将其隐藏

function test(jQuery) {
    $("#fade").hide().delay(500).fadeIn(4000);
    $("#fade2").hide().delay(500).fadeIn(4000); //typo
    //this can be shorten to
    //$("#fade, #fade2").hide().delay(500).fadeIn(4000);
}
$(document).ready(test);

或使用CSS

#fade, #fade2 {
    display: none;
}

Answer 2

delay()暂停队列中的方法链。 您也可以尝试使用原始setInterval ：

function test(){
    var animation = setInterval(function(){
        //whatever here is run after 500 ms
        $("#fade").fadeIn(4000);
        $("#fade2").fadein(4000);
        clearInterval(animation); //we prevent the loop so it only runs once
    }, 500);
}

$(document).ready(test);

或类似这样的事情，因此您无需为每种方法键入文档就绪事件：

function test(){
    var animation = setInterval(function(){
        //whatever here is run after 500 ms
        $("#fade").fadeIn(4000);
        $("#fade2").fadein(4000);
        clearInterval(animation); //we prevent the loop so it only runs once
    }, 500);
}

$(document).ready(function(){
    //I like this approach better.
    test();
});