如何在mouseover上創建javascript或css fadeInDown？

Question

我想要創建的想法是：我有一些div作爲觸發器，當我將鼠標放在這些div上時，它們的數據將顯示在特定的div中（右側接近div），並且當我將鼠標移出默認值數據將顯示，並且每次都會出現淡入淡出效果。下面是我已經儘量做到

<style type="text/css"> 
 
.content { 
 
    margin-left: 200px; 
 
    border: 1px solid; 
 
    height : 0; 
 
    opacity : 0; 
 
    transition : opacity .3s ease, height .3s ease; 
 
    -webkit-transition : opacity .3s ease, height .3s ease; 
 
    -moz-transition : opacity .3s ease, height .3s ease; 
 
    position: absolute; 
 
} 
 
.content.fade-in-down { 
 
    opacity : 1; 
 
    height : 100px; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
} 
 
</style> 
 
<script> 
 
    function show(id) { 
 
     document.getElementById("default").classList.remove("fade-in-down"); 
 
     setTimeout(function(){ 
 
     var el = document.getElementById(id); 
 
      el.classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    function hide(id) { 
 
     var el = document.getElementById(id); 
 
      el.classList.remove("fade-in-down"); 
 
     setTimeout(function(){ 
 
      document.getElementById("default").classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 

 
    window.onload = function(e) { 
 
    var el = document.getElementById("default"); 
 
    el.classList.add("fade-in-down"); 
 
    }; 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
     <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
     <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
     <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
    </div> 
 
    <!--These are the data--> 
 
    <div id="default" class="content" style="position: absolute;">This is default</div> 
 
    <div id="div1" class="content">Div 1 Content</div> 
 
    <div id="div2" class="content">Div 2 Content</div> 
 
    <div id="div3" class="content">Div 3 Content</div> 
 
</div>

現在的問題是：在當我鼠標移到DIV1，DIV2或DIV3數據顯示，但以前的DIV數據也鑲上DIV顯示，看起來很亂。我用滑下這將是更好的，如果我可以使用fadeInDown效果，而不是向下滑動淡入

Answer 1

我已經更新了你的例子包括ClearSelection方法，每當show或hide方法被觸發時調用。

html已被更改爲包含div與「數據」的id。這樣可以在調用ClearSelection方法時查詢子節點。

的ClearSelection方法遍歷所有的孩子中的「數據」 div，並刪除了「淡入向下」類，以確保只有一個div是在任何一個時間可見。

.content { 
 
    margin-left: 200px; 
 
    border: 1px solid; 
 
    height: 0; 
 
    opacity: 0; 
 
    transition: opacity .3s ease, height .3s ease; 
 
    -webkit-transition: opacity .3s ease, height .3s ease; 
 
    -moz-transition: opacity .3s ease, height .3s ease; 
 
    position: absolute; 
 
} 
 
.content.fade-in-down { 
 
    opacity: 1; 
 
    height: 100px; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
}

<div style="display: block; width: 100%"> 
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
    <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
    <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
    <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
    </div> 
 
    <div id="data"> 
 
    <!--These are the data--> 
 
    <div id="default" class="content" style="position: absolute;">This is default</div> 
 
    <div id="div1" class="content">Div 1 Content</div> 
 
    <div id="div2" class="content">Div 2 Content</div> 
 
    <div id="div3" class="content">Div 3 Content</div> 
 
    </div> 
 
</div> 
 

 
<script> 
 
    function show(id) { 
 
    document.getElementById("default").classList.remove("fade-in-down"); 
 
    setTimeout(function() { 
 
     //Clear any prior selections. 
 
     ClearSelection(); 
 
     var el = document.getElementById(id); 
 
     el.classList.add("fade-in-down"); 
 
     var defaultEl = document.getElementById("default"); 
 
     //If the default element has a class of "fade-in-down", remove it. 
 
     if (defaultEl.className.indexOf("fade-in-down") !== -1) { 
 
     defaultEl.classList.remove("fade-in-down"); 
 
     } 
 
    }, 500); 
 
    } 
 

 
    function hide(id) { 
 
    var el = document.getElementById(id); 
 
    el.classList.remove("fade-in-down"); 
 
    setTimeout(function() { 
 
     //Clear any prior selections 
 
     ClearSelection(); 
 
     //Find the default element. 
 
     var defaultEl = document.getElementById("default"); 
 
     //If the default element doesn't have a class of "fade-in-down", add it. 
 
     if (defaultEl.className.indexOf("fade-in-down") === -1) { 
 
     defaultEl.classList.add("fade-in-down"); 
 
     } 
 
    }, 500); 
 
    } 
 

 
    function ClearSelection() { 
 
    var parent = document.getElementById('data'); 
 
    if (parent != null && parent.children.length > 0) { 
 
     //Loop through all of the child nodes and remove the "fade-in-down" class. 
 
     for (var i = 0; i < parent.children.length; i++) { 
 
     document.getElementById(parent.children[i].id).classList.remove("fade-in-down"); 
 
     } 
 
    } 
 
    } 
 

 
    window.onload = function(e) { 
 
    var el = document.getElementById("default"); 
 
    el.classList.add("fade-in-down"); 
 
    }; 
 
</script>