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

Question

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

<style type="text/css"> 
 
    #div1, #div2, #div3 { 
 
     visibility: hidden; 
 
     position: absolute; \t 
 
     } 
 
    .content { 
 
\t margin-left: 200px; 
 
\t background-color: #87C540; 
 
\t height: 100px; 
 
     } 
 
    .trigger { 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: #333; 
 
     margin-bottom: 20px; 
 
     } 
 
</style> 
 

 
<script> 
 
    function show(id) { 
 
    document.getElementById(id).style.visibility = "visible"; 
 
    } 
 
    function hide(id) { 
 
    document.getElementById(id).style.visibility = "hidden"; 
 
    } 
 
</script> 
 

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

一切工作，但我想補充當數據被改變fadeInDown影響，而且當頁面第一次加載。

Answer 1

這裏是你的代碼的工作演示。您可以通過jQuery的動畫也做象下面這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<style type="text/css"> 
 
    #div1, 
 
    #div2, 
 
    #div3 { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    } 
 
    .content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height: 100px; 
 
    } 
 
    .trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
    } 
 
</style> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script> 
 
    function show(id) { 
 
    document.getElementById(id).style.visibility = "visible"; 
 
    $('#'+id).fadeIn('slow'); 
 
    /*$('#' + id) 
 
     .css('opacity', 0) 
 
     .slideDown('slow') 
 
     .animate({ 
 
     opacity: 1 
 
     }, { 
 
     queue: false, 
 
     duration: 'slow' 
 
     });*/ 
 
    } 
 

 
    function hide(id) { 
 
    document.getElementById(id).style.visibility = "hidden"; 
 
    $('#'+id).fadeOut('slow'); 
 
    /*$('#' + id) 
 
     .css('opacity', 0) 
 
     .slideDown('slow') 
 
     .animate({ 
 
     opacity: 1 
 
     }, { 
 
     queue: false, 
 
     duration: 'slow' 
 
     });*/ 
 
    } 
 
</script> 
 

 
<div style="display: block; width: 100%"> 
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
    <div onMouseOver="show('div1');hide('default')" onMouseOut="show('default'); hide('div1')" class="trigger"></div> 
 
    <div onMouseOver="show('div2');hide('default')" onMouseOut="show('default'); hide('div2')" class="trigger"></div> 
 
    <div onMouseOver="show('div3');hide('default')" onMouseOut="show('default'); 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>

Answer 2

您可以使用slideDown()，slideUp()。如果您想淡入淡出效果，請嘗試fadeIn()和​​。

以下是說明沒有jQuery的slideDown和slideUp

function show(id) { 
 
    $(".content:visible").slideUp(400, function(){ 
 
     $("#" + id).slideDown(400); 
 
    }); 
 
}

#div1, 
 
#div2, 
 
#div3 { 
 
    display:none; 
 
    position: absolute; 
 
} 
 
.content { 
 
    margin-left: 200px; 
 
    background-color: #87C540; 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 
.trigger { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #333; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div style="display: block; width: 100%"> 
 
    
 
    <!--These Three div are the trigger--> 
 
    <div style="float: left;"> 
 
    <div 
 
     onMouseOver="show('div1');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    <div 
 
     onMouseOver="show('div2');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    <div 
 
     onMouseOver="show('div3');" 
 
     onMouseOut="show('default');" class="trigger"></div> 
 
    </div> 
 
    
 
    <!--These are the data--> 
 
    <div id="default" class="content"> 
 
    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>

Answer 3

片段。純JavaScript/CSS過渡fadeInSlideDown/fadeOutSlideUp

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

<script> 
 
    var myVar; 
 

 
    function show(id) { 
 
    \t clearTimeout(myVar); 
 
    \t document.getElementById("default").classList.remove("fade-in-down"); 
 
    \t setTimeout(function(){ 
 
      var el = document.getElementById(id); 
 
    \t el.classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    function hide(id) { 
 
     \t var el = document.getElementById(id); 
 
    \t el.classList.remove("fade-in-down"); 
 
     myVar = 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%"> 
 
\t <!--These Three div are the trigger--> 
 
\t <div style="float: left;"> 
 
\t \t <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
\t </div> 
 
\t <!--These are the data--> 
 
\t <div id="default" class="content" style="position: absolute;">This is default</div> 
 
\t <div id="div1" class="content">Div 1 Content</div> 
 
\t <div id="div2" class="content">Div 2 Content</div> 
 
\t <div id="div3" class="content">Div 3 Content</div> 
 
</div>

簡單的淡入/淡出效果，要在綠色格動畫添加你的時候

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

<script> 
 
    var myVar; 
 

 
    function show(id) { 
 
    \t clearTimeout(myVar); 
 
    \t document.getElementById("default").classList.remove("fade-in-down"); 
 
    \t setTimeout(function(){ 
 
      var el = document.getElementById(id); 
 
    \t el.classList.add("fade-in-down"); 
 
     }, 500); 
 
    } 
 
    function hide(id) { 
 
     \t var el = document.getElementById(id); 
 
    \t el.classList.remove("fade-in-down"); 
 
     myVar = 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%"> 
 
\t <!--These Three div are the trigger--> 
 
\t <div style="float: left;"> 
 
\t \t <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div> 
 
\t \t <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div> 
 
\t </div> 
 
\t <!--These are the data--> 
 
\t <div id="default" class="content" style="position: absolute;">This is default</div> 
 
\t <div id="div1" class="content">Div 1 Content</div> 
 
\t <div id="div2" class="content">Div 2 Content</div> 
 
\t <div id="div3" class="content">Div 3 Content</div> 
 
</div>