jQuery在点击后淡出一个新的背景

Question

堆栈上有类似的线程，但我没有找到适合我的任何东西。

我有一个身体背景，我想单击后更改。

$('#start').click(function(){ 
    $(this).fadeOut('slow'); 
    $('#help').fadeOut('slow'); 
    $('#exit').fadeOut('slow'); 

    setTimeout(function(){ 
      $('body').css('background-image','url(media/note.jpg)'); 
    },500); 
}); 

所以，我想新的背景fadeIn。我尝试过以任何可能的方式添加它，这是我可以想到的，但没有运气。

有没有办法做到这一点？

Answer 1

您可以使用jQuery UI库添加类的延迟，像这样：

$(document).ready(function() { 
    $("#start").click(function() { 
     $(this).fadeOut('slow'); 
     $('#help').fadeOut('slow'); 
     $('#exit').fadeOut('slow'); 
     $('body').addClass("note", 1000); 
    }); 
}); 

其中类 “注” 看起来像：

​​

使用jQuery UI库中，请确保将以下脚本添加到您的html HEAD标记中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> 

C找出这个jsFiddle的例子：CLICK！