.fadeOut()
In this chapter you will learn:
- Syntax and Description for .fadeOut()
- Fade out button
- Fast fade out
- Fade out in milliseconds
- Fade out one second
- Slow fade out
- Paragraphs to fade out
Syntax and Description
$(selector).fadeOut([speed,] [easing,] [callback]);
Hide the matched elements by fading them to transparent.
duration (optional) A string or number determining how long the animation will run
callback (optional) A function to call once the animation is complete
Return value
The jQuery object, for chaining purposes.
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none.
Durations are given in milliseconds; higher values indicate slower animations. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
If supplied, the callback is fired once the animation is complete.
Fade out button
<html><!--from ja va 2s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).fadeOut();
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Fast fade out
<html><!--from j ava 2s. c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).fadeOut("fast");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Fade out in milliseconds
<html><!--from j a va 2 s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).fadeOut(2000);
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Fade out one second
<html><!--from j a v a 2s .co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").text("selected").show().fadeOut(1000);
});
</script>
</head>
<body>
<body>
<div></div>
</body>
</html>
Slow fade out
<html><!-- j a va2 s. co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).fadeOut("slow");
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Paragraphs to fade out
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
<html><!--from j a v a2 s . co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").fadeOut("slow");
});
});
</script>
</head>
<body>
<body>
<p>fade away. java2s.com</p>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
- Syntax and Description for .fadeTo()
- Fade to a certain opacity
- Fade to callback
- Fast fade to
- Fade to random seconds
- Slow fade to
- Fade a paragraph