几秒后隐藏/显示一个Div

Question

我有一个Div。我希望在10秒后隐藏它，然后在30秒后显示它，然后在10秒后再次隐藏它，依此类推。

我有这个代码，但它不像我想象的那样工作。

setTimeout(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
            $("#myDiv").show(); 
    },30000);
},10000); 

有什么建议吗？

Answer 1

就像

一样循环

function toggleDiv() {
    setTimeout(function () {
        $("#myDiv").hide();
        setTimeout(function () {
            $("#myDiv").show();
            toggleDiv();
        }, 30000);
    }, 10000);
}
toggleDiv();

演示：Fiddle

Answer 2

使用setInterval之类的，

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
        $("#myDiv").show(); 
    },10000);
},30000); 

Demo

您可以相应地设置时间，例如尝试，

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
       $("#myDiv").show(); 
    },3000);
},4000); 

Updated Demo

Answer 3

使用setInterval（func，timeout）代替，它将运行每个超时毫秒并在func切换div中显示可见和隐藏

Answer 4

如果你不介意初始状态被“显示”，你可以这样做（这是Rohan Kumar可能想要的）：

setInterval(function() { 
    $("#myDiv").show(); 
    setTimeout(function() {     
       $("#myDiv").hide(); 
    },10000);
},40000); 

重复计时器设置为每40秒（总间隔30 + 10），并在10秒的固定超时后发生隐藏。

还有一个timing库可以扩展JQuery动画（允许重复等）：

http://creativecouple.github.com/jquery-timing/

然后你的代码变成了：

$("#myDiv").repeat().wait(10000).show().wait(30000).hide();

JSFiddle：http://jsfiddle.net/TrueBlueAussie/zDV6F/1/

我认为这很酷。

如果您不介意额外的电话，或者不想要额外的图书馆，请参阅Arun P Johny的回答。