一個接一個地顯示div，另一個顯示div

所以我有這個代碼，其中某個div顯示當你懸停在另一個div。

HTML

<section class="map"> 

    <img src="img/map.jpg"> 

    <div id="vietnam"> 
    <div id="vietnam-1">Vietnam</div> 
    </div> 

    <div id="cambodia"> 
     <div id="cambodia-1">Cambodia</div> 
    </div> 

    <div id="singapore"> 
     <div id="singapore-1">Singapore</div> 
    </div> 
</section>

CSS

.map { 
    background: #fff; 
    font-size: 1em; 
    padding: 0; 
    margin:0; 
    line-height: 2em; 
    position: relative; 
    text-align: center; 
    z-index: 1 
} 

#vietnam, #cambodia, #singapore { 
    background-image: url(img/pin.png); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 15px; 
    height: 22px; 
    position: absolute; 
} 

#vietnam:hover, #cambodia:hover, #singapore:hover { 
    background-image: url(img/bluepin.png); 
} 

#vietnam { 
    top: 43.9%; 
    right: 21.8%; 
} 

#cambodia{ 
    top: 42.7%; 
    right: 22.7%; 
} 

#singapore { 
    top: 51%; 
    right: 22.6% 
} 

#vietnam-1, #cambodia-1, #singapore-1 { 
    display: none; 
    background:#007eff; 
    overflow: hidden; 
    z-index: 100; 
} 

#vietnam:hover #vietnam-1, #cambodia:hover #cambodia-1, #singapore:hover #singapore-1 { 
    display: block; 
    top: 2em; 
    position: absolute; 
    right: -4em; 
}

現在，我希望發生的是，上懸停出現在div也會顯示一個接一個彼此，一次一個。所以就像越南出現的那樣，幾秒鐘後，它將隱藏消失，柬埔寨將出現，然後幾秒鐘後，它將消失，新加坡這個詞將出現。

我該如何做到這一點？謝謝！

來源

2014-05-10 user3079066

你需要在Javascript中這樣做，它不能在CSS中完成。 – Barmar

使用'setTimeout'在幾秒鐘後執行操作。 – Barmar

您可能可以使用CSS動畫進行此操作。他們只能在最近的瀏覽器版本中工作：http://caniuse.com/#feat=css-animation – adv12

Lookt在

.animate() | jQuery API Documentation

你可以做一個函數遞歸調用（我沒有測試此代碼）：

animateDivs = function(divIdArray, position) { 
    if(position == null) { 
    position = 0; 
    } 
    var divId = divIdArray[position++]; 
    $("#" + divId).animate({ 
    width: "toggle", 
    height: "toggle" 
    }, { 
    duration: 5000, 
    specialEasing: { 
     width: "linear", 
     height: "easeOutBounce" 
    }, 
    complete: function() { 
     animateDivs(divIdArray, position); 
    } 
    }); 
};

然後調用函數：

$(document).ready(function(){ 
    animateDivs(["vietnam", "cambodia", "singapore"]); 
});

（我沒有測試這個代碼！）自己改進它;）

來源

2014-05-10 01:16:42

一個接一個地顯示div，另一個顯示div

回答

相關問題