Description:
In this article, I will explain how to add
sliding effects using Jquery.
Slide effect:
This effect is used to slides the selected elements to up and
down directions.
<p>This is the sample content</p>
SlideUp- It is used to slide the elements to upward
directions
Syntax: $ (selector).slideUp (speed, callback)
$('p').slideUp ('slow');
SlideDown – It is used to slide the elements to
downward directions
Syntax: $ (selector).slideDown (speed, callback)
$('p').slideDown (3000); // 3000 - milliseconds
SlideToggle – It is used to toggles slide between
upward and downward direction
Syntax: $ (selector).slideToggle (speed,
callback)
$('p').slideToggle ('slow');
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Slide Effects in Jquery</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSlideUpEffect").click(function () {
$('#MakeSlideEffect').slideUp('slow');
return false;
});
$("#btnSlideDownEffect").click(function () {
$('#MakeSlideEffect').slideDown(3000);
return false;
});
$("#btnSlideToggleEffect").click(function () {
$('#MakeSlideEffect').slideToggle('slow');
return false;
});
});
</script>
<style type="text/css">
#MakeSlideEffect
{
height: 58px;
background-color: lightgray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="MakeSlideEffect">
This is the sample content.
</div>
<asp:Button ID="btnSlideUpEffect" runat="server" Text="Slide Up Effect" />
<asp:Button ID="btnSlideDownEffect" runat="server" Text="Slide Down Effect" />
<asp:Button ID="btnSlideToggleEffect" runat="server" Text="SlideTogggle" />
</div>
</form>
</body>
</html>
Slide Effect with Jquery ,
Jquery slide effect, Slide effect in Jquery, Jquery slideup slidedown and
slidetoggle effects, Adding slide effect using Jquery, Slide Effect, Slide up
and slide down using Jquery, Jquery slidetoggle effects
0 comments:
Post a Comment