Make Automatic Content Slider on Mouse Over as On Facebook Create Page

Make Automatic Content Slider on MouseOver
Hello Friends, Today I Will Teach you Make A a box which will autoscroll with animation on hover on it. It's Concept is also used in Facebook when you use to create a new page when you are not logged in it. It is A Wonderful JQuery tool that you should Implement on your site.
Original Article is on my other tutorial site i.e. http://tutorial.ashutoshanand.com/

CLICK HERE TO VIEW ON MY SITE.














Here is the Complete Source Code of the
Tutorial. If You Dont Understand anything then comment below

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#tab").hover(function(){
    $('#t1').slideDown(400);
    $('#t2').slideDown(400);
 $("#middle").css("color","#0072c6",200);
     $("#t2").fadeOut(400);
 $("#t1").fadeIn("slow"); 
  },function(){
    $('#t1').slideUp(400);
    $('#t2').slideUp(400);
    $("#t2").fadeIn(400);
 $("#middle").css("color","#111");
 $("#t1").fadeOut(400);
  });
  $("#tab2").hover(function(){
    $('#t12').slideDown(400);
    $('#t22').slideDown(400);
 $("#middle2").css("color","#0072c6",200);
     $("#t22").fadeOut(400);
 $("#t12").fadeIn("slow"); 
  },function(){
    $('#t12').slideUp(400);
    $('#t22').slideUp(400);
    $("#t22").fadeIn(400);
 $("#middle2").css("color","#111");
 $("#t12").fadeOut(400);
  });
});
</script>
</head>
<style>
div.tab{display:inline-block;-webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(250, 250, 250) 100%);background-origin: padding-box;background-image: linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -o-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -moz-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -webkit-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-image: -ms-linear-gradient(bottom, rgb(250,250,250) 10%, rgb(250,245,250) 63%, rgb(255,255,255) 80%);background-size: auto;border-bottom-color: rgb(229, 229, 229);border-bottom-style: solid;border-bottom-width: 1px;border-left-color: rgb(229, 229, 229);border-left-style: solid;border-left-width: 1px;border-right-color: rgb(229, 229, 229);border-right-style: solid;border-right-width: 1px;border-top-color: rgb(229, 229, 229);padding:30px;width:204px;}
div.content{width:200px;height:270px;color:#222;font-family:'open sans', arial, sans-serif;font-size:13px;}
</style>

<body>
<table cellspacing=10 cellpadding=10>
<tr>
<td>

<div id="tab" style="height:220px;width:200px;overflow:hidden;cursor:pointer;padding:30px;" class="tab">
 
 
 <div id="t1" style="display:none;width:220px;height:100px;">
  <img src="http://profile.ak.fbcdn.net/hprofile-ak-ash4/c33.33.414.414/s160x160/295272_440228536008840_1472236200_n.jpg" height="70" width="70">

 </div>
 
 
 <div id="middle"  style="font-family:open sans light;font-size:25px;color:#222">
  Hi I am Middle element Place Your Title Here
 </div>
  
 
 <div id="t2" style="" class="content">
 <br>
 Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
 </div>
</div>
</td>

<td>
<div id="tab2" style="height:220px;width:200px;overflow:hidden;cursor:pointer;padding:30px;" class="tab">
 
 
 <div id="t12" style="display:none;width:220px;height:100px;">
  <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/c0.30.180.180/s160x160/539327_104541003013282_445606083_a.jpg" height="70" width="70">

 </div>
 
 
 <div id="middle2"  style="font-family:open sans light;font-size:25px;color:#222">
  Hi I am Middle of 2nd Box Place Your Title Here
 </div>
  
 
 <div id="t22" style="" class="content">
 <br>
 Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
 </div>

</div>
</td>
</tr>
</table>
</div>
</body>
</dhtml>



Live Demo:

Hi I am Middle element Place Your Title Here

Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
Hi I am Middle of 2nd Box Place Your Title Here

Hey Write Here Something About Me here , I am the Discription of the Above topic mentioned above
References:
  • Jquery Reference
  • Jquery Slide Down Reference
  • Jquery Slide Up Reference
  • Comments

    Popular posts from this blog

    Speed Up Browsing in FireFox

    Learn Web Developing Courses for free ?

    How To Publish Free Sites