带有CSS值的jQuery / javascript if语句

Question

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?

Answer 1

I think you are looking for this. Try it

function bubbleTest(){
   if(!$("#headlights").is(":visible")){//This will check for headlights is visible or not
      $("#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);              
      });
}

Answer 2

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).

Answer 3

Try replacing this:

$("#headlights").css("display") == "none"

with this:

if (!$("#headlights").is(':visible'))

:visible is a jQuery "selector" (read the docs on them if you haven't, they're highly informative). You can use the is() method to do things like check to see if the visible selector is true. Likewise, you can do things like this for form elements:

if ($('#optInCheckbox').is(':checked'))