jquery - 点击后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);
    });
});

​ 类“note”看起来像：

​.note{
    background-image:url('media/note.jpg');
    /*more styling if you like */
}​

要使用 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>

看看这个 jsFiddle 的例子：点击！