jquery - Fade in div 不会褪色，但已经存在

Question

我制作了这个简单的 jQuery 脚本，但我有一个小问题。在我将我的第一个 div 淡出之后，我的第二个淡入淡出不起作用，因为 div 已经在那里......我已经尝试用更多毫秒来减慢淡入淡出，但它没有用。这是我的脚本。

$("#nothing > h1").click(function(){
$(this).fadeOut(1000);
$("#social").fadeIn(1000);  
  });

这是我的 HTML

<div id="nothing">
    <h1>Click here.</h1>
</div>

<div id="social">      
   <h2>Nothing to see here</h2>
</div>

谢谢！

Answer 1

这是我为您制作的 jsFiddle：

http://jsfiddle.net/LJK3P/1/

$('#social').hide();

 $("#nothing > h1").click(function(e){
     e.preventDefault();// Just in case

     //You probally would want to fade out the parent of the h1 so add parent() 
     $(this).parent().fadeOut(1000, function() { 
         $("#social").fadeIn(1000);
     });

});

Answer 2

如果这应该按顺序发生，则必须调用事件的fadeIn()内部回调fadeOut，如下所示：

$("#nothing > h1").click(function(){
   $(this).fadeOut(1000, function() {
     $("#social").fadeIn(1000);
   });    
});

希望这可以帮助！