Last updated on January 9th, 2023 at 11:44 am
This is just a simple jquery vertical slide in and out animation that can be implemented in to any website. Main use case will be whenever the website designer/developer needs their users attention to be redirected in to that particular content at least for a second.
Script gets triggered when the page loads. You can also use this script to display your sponsor listing to be in an animated fashion.
Let us start with jquery
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
$(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 disappear.
if(i==4)
{
$('#slidebottom').fadeOut("slow");
clearInterval(intervalID);
$("#my_button").show();
}
}
//Setting interval
intervalID =setInterval("newQsNum()", 3000);
});
</script>
Now that we have set the animation interval to 3000 ms / 3 seconds. And the fadeout as “slow”. Before adding CSS keep in mind that in the above code we are defining i as 4. That means it will animate 3 times and then it will disappear. Now that you know where to change what, lets add some CSS.
<style>
.inner {
background-color: #000000;
top: 0;
color: #fff;
height: 120px;
left: 0;
position: absolute;
width: 100%;
}
</style>
OK we have the style and also the animation script ready but without HTML to show the div, it will never work 🙂 .
Your content can go inside div with class “inner“
<div id="slidebottom" class="slide">
<button style="display:none" id="" onclick=""></button>
<div class="inner">Todays Sponsor</div>
</div><button id="my_button" >View Our Sponsor Again</button>
In the HTML above, we have a button with id = “my_button”. We hide this button in the jQuery script we defined using
$("#my_button").hide();
And show it after we clear the interval within the condition when i==4
$('#slidebottom').fadeOut("slow");
clearInterval(intervalID);
$("#my_button").show();
Simple right. Here is the DEMO
admin
Works!!!