How to create javascript/css fadeInDown on mouseover?

The idea of what I want to create is: I have some div as trigger when I mouse over on these div than their data will show in a specific div, and when I mouse out than the default data will show, and each time there will be a fadeInDown effect. Here is I have done as far

<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>

Answers


Here is working demo with your code. you can do this by jquery animate also like below:

<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>

You can use slideDown(), slideUp(). If you want fadeIn effect, try fadeIn() and fadeOut().

Following is a snippet illustrating slideDown and 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>

Without jQuery. Pure javascript/css transition 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>

Need Your Help

How do I enable sticky load balancing based on session identifiers using apache mod_proxy_balancer

apache proxy httpd.conf mod-proxy load-balancing

Our proxy configuration (in httpd.conf) to send requests to 2 JBoss instances are given below is based on mod_proxy_balancer

Spring Hibernate Integration

hibernate spring

I am new to Spring Hibernate. I was trying Spring Hibernate integration tutorial from http://www.vaannila.com/spring/spring-hibernate-integration-1.html