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();
});

jQuery淡出延迟

2 个答案: