Question

我正在尝试创建一个简单的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淡出（或称为第二个{{1}时，不会将background-color: white;设置回toggle再次）。它被困在蓝色上。有谁知道如何解决这个问题？

这是一个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/

Answer 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

jQuery if语句的问题

2 个答案: