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

Question

我想要创建的想法是：我有一些 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

这是使用您的代码进行的演示。你也可以通过 jquery 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() 和fadeOut()。

以下是说明slideDown 和slideUp 的sn-p

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>