We are using simple jquery to implement a slide down and slide up effect on a div. Also a little styling can be done using css and HTML.
<html>
<div id="divTest" style="width: 40px; height: 40px; display: none; background-color: #fff;"></div>
<script type="text/javascript">
$(function()
{
$("#divTest").slideDown(2000, function()
{
$("#divTest").slideUp(3000);
});
});
</script>
</html>
This a simple way to show animated effect on a div. In the above code snippet the callback function we have used will be called as soon as the slideDown() method is finished and then the slideUp() method is called.
A more simpler method can be used to implement the similar effect using slideToggle() method.
0 Comment(s)