javascript - jquery- 改变 css 但不能重置为 original-fadein() 导致程序也停止工作

Question

我正在尝试将背景颜色更改为蓝色，并使其淡入淡出。我还希望在单击按钮时背景颜色恢复正常(这是一个游戏，当您单击再次播放按钮时，游戏正在重置，并且您从头开始)。

我如何将背景色改回原来的颜色——我是否可以在单击重播按钮时调用的函数中执行此操作？我如何将其恢复正常？

另外，fadein() fadeout() 会导致游戏停止运行。所以在 fadein 之后，fadeout 没有任何作用了..

有什么建议吗？谢谢!!

$('#results').append("<p>You won! 
</p>").appendTo('#results').css({fontSize:'40px'}).fadeIn().fadeOut().fadeIn().fadeOut().fadeIn().fadeOut().fadeIn().fadeOut 
();
 $('body').css({'background-color': 'blue'});

Answer 1

我不确定这是否是您想要的行为，而且我们无法从您发布的内容中判断是什么导致您的代码停止，但这是我尝试过的:

$('#playBtn').click(function() {
    var number_of_fadings = 4;

    $('#playBtn').hide();
    $('#results').append("<p>You won!</p>");

    (function doFadeInOut() {
        $('#results').fadeIn().fadeOut(function() {
            number_of_fadings--;
            if (number_of_fadings > 0) { doFadeInOut(); }
            else { $('#restartBtn').show(); }
        });
    })();

    $('body').css({ 'background': '#09f' });
});

$('#restartBtn').click(function() {
    $('body').css({ 'background': '#fff' });
    $('#playBtn').show();
    $('#restartBtn').hide();
    $('#results').empty();
});

body{ font-family: Arial, Helvetica, sans-serif; }
#restartBtn, #results { display: none; }
#results p{ padding: 1em; font-size: 2em; text-align: center; color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="playBtn">Play</button>
<button id="restartBtn">Restart the game</button>
<div id="results"></div>