开发者

<p> cannot show after fade out , what's wrong?

开发者 https://www.devze.com 2023-03-12 06:22 出处:网络
Why the #hello can fade out but not show anymore?? thanks! <!DOCTYPE html> <html> <head>

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消