javascript - 如何在鼠标悬停时创建 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>