Problems with jQuery if statement

Question

I am trying to create a simple if statement: if .information-overlay has the CSS property display:block, add background-color:blue;; to body. If not, don't.

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');
    }
});

This works fine, however it does not set the body back to background-color: white; when the toggle fades out (or is call the second if again). It is stuck on blue. Does anyone know how to fix this?

Here is a JSFIDDLE: http://jsfiddle.net/hWXeM/6/

You need to check it in the callback.

j08691
– j08691

2013-08-27 14:41:25 +00:00
Commented Aug 27, 2013 at 14:41 — j08691
– j08691, Commented Aug 27, 2013 at 14:41

Satpal · Accepted Answer · 2013-08-27 14:41:35Z

3

You have to pass action to be performed once the animation is complete

$('.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();
});

Demo: http://jsfiddle.net/hWXeM/7/

answered Aug 27, 2013 at 14:41

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen · Accepted Answer · 2013-08-27 14:42:31Z

2

Instead add the if..else.. statement inside the fadeToggle like this

$('.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');
    }
    });

Check this JSFiddle

answered Aug 27, 2013 at 14:42

Praveen

56.7k35 gold badges138 silver badges170 bronze badges

Collectives™ on Stack Overflow

Problems with jQuery if statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related