Description:
In this article, I will explain how to add
fading effects using Jquery.
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');
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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 () {
$("#btnFadeInEffect").click(function () {
$('#MakeFadeEffect').fadeIn(5000);
return false;
});
$("#btnFadeOutEffect").click(function () {
$('#MakeFadeEffect').fadeOut(5000);
return false;
});
$("#btnFadeToggleEffect").click(function () {
$('#MakeFadeEffect').fadeToggle(5000);
return false;
});
});
</script>
<style type="text/css">
#MakeFadeEffect
{
height: 58px;
background-color: lightgray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="MakeFadeEffect">
This is the sample content.
</div>
<asp:Button ID="btnFadeInEffect" runat="server" Text="Fade In Effect" />
<asp:Button ID="btnFadeOutEffect" runat="server" Text="Fade Out Effect" />
<asp:Button ID="btnFadeToggleEffect" runat="server" Text="Fade Togggle Effect" />
</div>
</form>
</body>
</html>
Fade Effect with Jquery , Jquery fade effect, Fade
effect in Jquery, Jquery fadein fadeout and fadetoggle effects, Adding Fade
effect using Jquery, Fade Effect, fadein and fadeout using Jquery, Jquery
fadetoggle effects
0 comments:
Post a Comment