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="" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//setting some variable i and also hiding the button
	var i=0;
 //click funtion
 $('#my_button').click(function() {
	i = 0;
	intervalID =setInterval("newQsNum()", 3000);
 //New toggle funtion
	newQsNum = function()
	$('#slidebottom button').next().slideToggle('slow');
	//set the animation count, here i have set that to 4. That means it will animate 3 times and then it will disapper.
   //Setting interval
	intervalID =setInterval("newQsNum()", 3000);

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

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

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 *