<p> cannot show after fade out , what's wrong?
Why the #hello can fade out but not show anymore?? thanks!
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { 开发者_如何学Cdisplay: block; }
</style>
<script>
$(function() {
$('#hello').delay(1000).fadeOut();
$('#hello').show();
});
</script>
</head>
<body>
<p id="hello">Hello World</p>
</body>
</html>
You have to wait until the fadeOut effect is done by providing a callback to it:
$(function() {
$('#hello').delay(1000).fadeOut('slow', function() {
$('#hello').show();
});
});
The .show() is getting called before the .fadeOut() has started.
Try this:
$('#hello').delay(1000).fadeOut(function(){
$('#hello').show();
});
example: http://jsfiddle.net/niklasvh/ZVD6z/
In your example the show() function is being called before the fadeOut has finished. If you change it to:
$('#hello').delay(1000).fadeOut(function() { $('#hello').show(); });
Then the hello p element will appear again as soon as the fade out is complete.
It can, the problem is that .show() is being called before .fadeOut() due to your delay.
To fix it, try:
$('#hello').delay(1000).fadeOut().show(); //Will reappear immediately
or
$('#hello').delay(1000).fadeOut().delay(1000).show(); //Will reappear after 1 second
Use the fadeOut callback to specify the actions to do when the animation is over
$(function() {
$('#hello').delay(1000).fadeOut(function() {
$('#hello').show();
});
});
http://jsfiddle.net/BfjsX/
加载中,请稍侯......
精彩评论