如何在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>