JQuery - Animation and Effects in JQuery:
Jquery Effects:
Jquery adds various effects for the elements just to add some visual appeal.
1 1. Fade effect
2 2. Slide effect
3 3. Animation effect
4 4. Hide and Show effect
5 5. Toggle effect
Fade effect:
This effect is used to fades the selected elements.
<p>This is the sample content</p>
FadeIn- It is used to adjust the opacity for the elements from hidden to visible
Syntax: $ (selector).fadeIn (speed, callback)
$('p').fadeIn ('slow');
FadeOut – It is used to adjust the opacity for the elements from visible to hidden
Syntax: $ (selector).fadeOut (speed, callback)
$('p').fadeOut ('slow');
FadeToggle – It is used to toggles between fadeIn and fadeout effects
Syntax: $ (selector).fadeToggle (speed, callback)
$('p').fadeToggle ('slow');
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');
Animation Effect:
This is used to apply custom animation with set of css properties for the elements.
Syntax: $ (selector).animate (params, speed, callback)
We can set css properties for the elements using animate () method.
$("#btnAnimate").click(function () {
$("div").animate({
height: '100px',
width: "50%",
fontSize: "2em"
}, 'slow');
return false;
});
Hide and Show Effect:
This is used to hide or show the selected elements.
Syntax:
$ (selector).hide (speed, callback)
$("p").hide ();
$ (selector).show (speed, callback)
$("p").show ();
Toggle Effect:
Toggle is nothing but just like On and Off. First time it will show the elements. Next time it will hide the elements.
This is used to hide or show the selected elements.
$ (selector).toggle (speed, callback)
$("p").toggle();
Jquery - Animation and Effects Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Fade 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 () {
$("#btnFade").click(function () {
$('p').fadeToggle(3000);
// 3000 - milliseconds
return false;
});
$("#btnSlide").click(function () {
$('p').slideToggle('slow');
return
false;
});
$("#btnAnimate").click(function () {
$("div").animate({
height: '130px',
width: "50%",
fontSize: "2em"
}, 'slow');
return
false;
});
$("#btnHideShow").click(function () {
$('p').toggle('slow');
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<p>This is the
sample content</p>
<asp:Button ID="btnFade" runat="server" Text="Fade" />
<asp:Button ID="btnSlide"
runat="server"
Text="Slide"
/>
<asp:Button ID="btnAnimate" runat="server" Text="Animation" />
<asp:Button ID="btnHideShow" runat="server" Text="Hide and Show" />
</div>
</form>
</body>
</html>
In the next lesson, I will explain about ‘Events
and Methods in jQuery’.
Go to Lesson Four- Events
and Methods in jQuery
Finally got it :) Practiced all types. Thanks. :)
ReplyDelete