2

我正在尝试创建一个简单的 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;个toggleif再次调用第二个）。它卡在蓝色上。有谁知道如何解决这一问题？

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

4

2 回答 2

3

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

$('.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/

于 2013-08-27T14:41:35.137 回答
2

而是在这样的if..else..内部添加语句fadeToggle

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

检查这个JSFiddle

于 2013-08-27T14:42:31.017 回答