javascript - jQuery if 语句的问题

Question

我正在尝试创建一个简单的 if 语句: if .information-overlay具有 CSS 属性 display:block ，添加background-color:blue; ;至body 。如果没有，就不要。

HTML:

<div class="information">Information</div>
<div class="work">Work</div>
<div class="information-overlay">INFORMATION OVERLAY</div>
<div class="work-overlay">WORK OVERLAY</div>

CSS:

.information-overlay, .work-overlay {
    display:none;
    width: 300px;
    height: 300px;
    background-color: salmon;
}

JS:

$('.information').click(function () {
    $('.information-overlay').fadeToggle();
    $('.work-overlay').fadeOut();
    if ($('.information-overlay').css('display') == 'block') {
        $('body').css('backgroundColor', 'blue');
    }
    if ($('.information-overlay').css('display') == 'none') {
        $('body').css('backgroundColor', 'white');
    }
});

这工作正常，但是它没有设置 body返回background-color: white;当 toggle淡出(或者再次调用第二个if)。它被困在蓝色上。有谁知道如何解决这个问题吗？

这是一个 JSFIDDLE:http://jsfiddle.net/hWXeM/6/

Answer 1

您必须传递动画完成后要执行的操作

$('.information').click(function () {
    $('.information-overlay').fadeToggle(function () {
        if ($('.information-overlay').css('display') == 'block') {
            $('body').css('backgroundColor', 'blue');
        }
        if ($('.information-overlay').css('display') == 'none') {
            $('body').css('backgroundColor', 'white');
        }
    });
    $('.work-overlay').fadeOut();
});

演示:http://jsfiddle.net/hWXeM/7/