Question

好的，所以我希望这两个div每隔三秒切换一次。我的问题是：我应该如何在JavaScript中执行此操作？我想创造一种strobelight效果。请忽略我的代码中的小错误，我没有完全完成。

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>

Answer 1

您可以使用javascript计时（http://www.w3schools.com/js/js_timing.asp）。

在该功能中，您可以定义每个div的可见性。例如：

var visible = true;
setInterval(function(){
    document.getElementById('strobe').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
    document.getElementById('baw').style.visibility    = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
    visible = !visible; // reverse the value of itself
}, 3000);

我希望这会有所帮助。

编辑：修改以获得javascript（不是jQuery）的可见性
由Martijn编辑：用户ternairy缩短代码。

Answer 2

你想要这样的东西吗？：http://jsfiddle.net/v9cKg/1/

setInterval(
    function()
    {
        $("#strobe").toggle("slow");
        $("#baw").toggle("slow");
    },
    3000);

它在JQuery中，但很容易转换为纯javascript。

Answer 3

你可以这样做; （http://jsfiddle.net/geass54/p9RcF/1/）

    <div id="strobe"></div>
<div id="baw" style="display:none"></div>

和js文件

    var visible = true;
setInterval(function(){

    if(visible)
    {

        $('#strobe').show();
        $('#baw').hide();
        visible=false
    }else
    {
        $('#strobe').hide();
        $('#baw').show();
        visible=true
    }

},3000);

Answer 4

你可以用一些简单的css和javascript做到这一点，不需要隐藏/显示东西的所有动画和效果（你不想要的，那些是密集的。

只需切换课程，请查看以下示例 HTML：

<div id="strobeDiv" class="basicStyling">
    <h1>This is some text</h1>
</div>

的Javascript

setInterval(function(){ $('#strobeDiv').toggleClass('reversedBasic') }, 3000);

风格：

.basicStyling{
    width: 100%;
    height: 100%;
    background: #FFF;
    color: #000;
}
.reversedBasic{
    background: #000; /* if no change, use !important here */
    color: #FFF;
}

对于额外的学分，这个javascript会更好，因为你只保存一次元素的引用，这使它更轻量级。如果没有这样做，每个X ms jQuery都会尝试找到该元素（如果你使用ID，它会很快，但速度更快：

var $strobediv = $('#strobeDiv'); // save the reference global, just once
setInterval(function(){ $strobediv .toggleClass('reversedBasic') }, 3000);

使用javascript在两个div之间自动更改

4 个答案: