jqueryexample.com jQuery fadeIn, fadeOut and fadeTo example - jqueryexample.com

jQuery fadeIn, fadeOut and fadeTo example by jqueryexample

jQuery has the three fade methods:
1. $(selector).fadeIn(speed,callback);
Display the matched elements with fade in effect.
2. $(selector).fadeOut(speed,callback);
Hide the matched elements with fade out / transparent effect.
3. $(selector).fadeTo(speed,opacity,callback);

All three methods are support duration as parameter : slow, fast, or exact milliseconds. Durations are given in milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:first").fadeTo("slow",0.3);
$(".fadeInbox").fadeIn("show");
$(".fadeOutbox").fadeOut("fast");
});
});
</script>
</head>
<body>
<button>Toggle</button>
<div>first block</div>
<div class="fadeInbox" style="display:none;">block - fadeIn()</div>
<div class="fadeOutbox">block - fadeOut()</div>
</body>
</html>

Did you like this? Share it:

Discussion

No comments yet, be the first.

Leave a Comment