joe joe - 13 days ago 6
CSS Question

jQuery/javascript if-statement with css values

I'm slightly new to the if statements and I'm working on an animation where:

If

<div id="headlights">
displays "none" in the css (which is constantly fading in and out), I want
<div id="speech-bubble-dark">
to fade in.

And when the
<div id="headlights">
displays "block" in the css, I want
<div id="speech-bubble-sun">
to fade in.

function bubbleTest(){
if($("#headlights").css("display") == "none" ) {
$("#speech-bubble").fadeOut('600');
$("#speech-bubble-sun").fadeOut('600', function(){
$("#speech-bubble-dark").fadeIn('600');
});

} else{
$("#speech-bubble").fadeOut('600');
$("#speech-bubble-dark").fadeOut('600', function(){
$("#speech-bubble-sun").fadeIn('600');
});

}
}


I've tested it and the fades do not work, and dependent on the display condition being "none" or "block" it displays a different div.

What would you suggest I do?

joe joe
Answer

The javascript originally posted:

function bubbleTest(){
if($("#headlights").css("display") == "none" ) {
    $("#speech-bubble").fadeOut('600');
    $("#speech-bubble-sun").fadeOut('600', function(){
        $("#speech-bubble-dark").fadeIn('600');
    });

}   else{
        $("#speech-bubble").fadeOut('600');
        $("#speech-bubble-dark").fadeOut('600', function(){
            $("#speech-bubble-sun").fadeIn('600');              
        });

    }
}
bubbleTest();

surprisingly works as intended, here is proof: http://codepen.io/anon/pen/zoNevZ

The problem must have been how I was calling the function, which I did not provide at the time (5 years ago).

Comments