jQuery/javascript if-statement with css values

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?

How many times are you calling the function bubbleTest? If only once then it will process the if block just once, and the else probably won't happen. Perhaps you need a carefully-timed setTimeout call inside the bubbleTest function to call it repeatedly? — James
– James, Commented Aug 19, 2011 at 13:04

ShankarSangoli · Accepted Answer · 2011-08-19 13:47:28Z

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

edited Aug 19, 2011 at 13:47

answered Aug 19, 2011 at 12:02

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

5 Comments

joe Over a year ago

The first bubble fades in fine, but the else-statement doesn't then fade out or fade the other in. What you've done is certainly a lot more practical than what I had any way.

ShankarSangoli Over a year ago

@joe - Can you be lil more clear of what you want, I can edit my answer?

ShankarSangoli Over a year ago

Can you check my edited answer? Is that what you were looking for?

joe Over a year ago

I just checked your edit, and it doesn't seem to be working how I'd like it to. On the first section, the #speech-bubble-dark, does fade in, but during the animation when the #headlights are hidden, it does not fade in the next speech bubble!

Istiaque Ahmed Over a year ago

@ShankarSangoli, may I ask you to have a visit at stackoverflow.com/questions/9554666/… ? I don't know whether such a request is valid in SOF.

Mike Thomsen · Accepted Answer · 2011-08-19 12:02:05Z

0

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

answered Aug 19, 2011 at 12:02

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

1 Comment

joe Over a year ago

Definitely works, thank you! But my else-statement doesn't. Any ideas?

joe · Accepted Answer · 2016-11-20 11:36:25Z

0

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

answered Nov 20, 2016 at 11:36

joe

4054 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery/javascript if-statement with css values

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related