Display/Hide the elements with a sliding motion using JQuery.
In this article,I will explain how to display/Hide elements with a sliding motion using Jquery.
The slideDown()/slideUp() method animates the height of the matched elements,from hidden to visible(slide effect).
Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
slideUp() Method :Hide the matched elements with a sliding motion.
In this article,I will explain how to display/Hide elements with a sliding motion using Jquery.
The slideDown()/slideUp() method animates the height of the matched elements,from hidden to visible(slide effect).
Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
slideUp() Method :Hide the matched elements with a sliding motion.
Syntax:
$(selector).slideDown(speed,callbackFunction)
$(selector).slideUp(speed,callbackFunction)
speed:(milliseconds,"slow","normal","fast");
E.g.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".b1").click(function()
{
$("Div").slideUp(2000);
// Animation Start.
});
$(".b2").click(function()
{
$("Div").slideDown(3000);
// Animation complete.
});
});
</script>
</head>
<body>
<Div>My Div</Div>
<button class="b1">up</button>
<button class="b2">down</button>
</body>
</html>
Thank you Rajesh
Nice one..