如何在鼠标悬停时创建javascript / css fadeInDown？

Question

我要创建的想法是：当我将鼠标悬停在这些div上时，我有一些div作为触发器，它们的数据将在特定的div中显示；当我将鼠标悬停时，默认数据将在每个div中显示。是fadeInDown效果。 这是我到目前为止所做的

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

一切正常，但是我想在数据更改时以及页面首次加载时添加fadeInDown效果。

Answer 1

这是与您的代码一起工作的演示。 您可以通过jani animate来做到这一点，如下所示：

 <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效果，请尝试fadeIn()和fadeOut() 。

以下是说明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

没有jQuery。 纯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) { clearTimeout(myVar); 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"); 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%"> <!--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> 

简单的淡入/淡出效果

 .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) { clearTimeout(myVar); 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"); 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%"> <!--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>