Last updated on January 17th, 2016 at 09:18 am

VN:F [1.9.22_1171]
Rating: 7.9/10 (7 votes cast)

This is just a simple div jquery slide in and slid out animation that can be incorporated in to any website. This can be used whenever the website designer/developer needs their web users attention to be redirected to that particular content atleast for a second. Really useful if we need our sponser listing to be displayed in an animated way.Here my script will animate the div 3 times and then disappears. You are free to modify the animation count to any number you like. Here is how my Jquery looks.

<script src="http://demo.mistonline.in/jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//setting some variable i and also hiding the button
	$("#my_button").hide();
	var i=0;
 //click funtion
 $('#my_button').click(function() {
	i = 0;
	$("#my_button").hide();
	$('#slidebottom').fadeIn("slow");
	intervalID =setInterval("newQsNum()", 3000);
 });
 //New toggle funtion
	newQsNum = function()
{
	$('#slidebottom button').next().slideToggle('slow');
	i++;
	//set the animation count, here i have set that to 4. That means it will animate 3 times and then it will disapper.
	if(i==4)
	{
	$('#slidebottom').fadeOut("slow");
	clearInterval(intervalID);
	$("#my_button").show();
	}    
}
   //Setting interval
	intervalID =setInterval("newQsNum()", 3000);
});
   </script>

Once the animation is over you will get a button and you can again restart the animation.
CSS part looks like this

<style>
   .inner {
    background-color: #000000;
    top: 0;
    color: #fff;
    height: 120px;
    left: 0;
    position: absolute;
    width: 100%;
}
   </style>

The HTML code

<div id="slidebottom" class="slide">
<button style="display:none" id=""  onclick=""></button>
<div class="inner">Todays Sponser</div>
</div><button id="my_button" >View Our Sponser Again</button>

Simple right. Here is the DEMO

VN:F [1.9.22_1171]
Rating: 7.9/10 (7 votes cast)
One thought on “Jquery slide in and slide out”

Leave a Reply

Your email address will not be published. Required fields are marked *