使用javascript自動在兩個div之間切換

好的，所以我想讓這兩個div每隔三秒切換一次。我的問題是：我應該如何在JavaScript中做到這一點？我想創造一個明快的效果。請忽略我的代碼中的小錯誤，即時通訊尚未完成。使用javascript自動在兩個div之間切換

<!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>

來源

2013-12-09 user3082570

你可以使用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縮短代碼很多。

來源

2013-12-09 11:44:54 EoD

可能會更好做使用'style.display'與無/塊如果你希望他們在同一個位置。'visibility：hidden'被隱藏，但會佔用空間 – Martijn

你想這樣的事情？：http://jsfiddle.net/v9cKg/1/

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

這是JQuery的，但很容易轉換成純JavaScript。

來源

2013-12-09 11:45:22 P5Coder

OP沒有標記'jquery'，所以技術上他不想使用'jquery'我想 –

可能。如果他不知道簡單的隱藏和純JavaScript他可能知道關於jQuery的尋求。:) – P5Coder

另外，他越來越瞭解如何做的事「少寫，難道Morw」的方式。 – P5Coder

你可以那樣做; （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);

來源

2013-12-09 11:50:51

你可以用一些簡單的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毫秒jQuery將嘗試找到元素（如果你使用的ID是快，但是這是更快：

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

來源

2013-12-09 12:45:01 Martijn

使用javascript自動在兩個div之間切換

回答

相關問題