jQuery .css() if statement, timeout string isn't working?

Question

I'm working on this navbar that when bgColor is true it needs to change the background color to rgba(15,18,65,0.9).

But when bgColor isn't true the background color needs to change. This works but it's to quick so I thought to put a delay on it, but for some reason it won't return the string and change background color.

If I console log the color instead of returning it it works fine. So what am I misunderstanding here? It only needs to delay the false color option.

$(".navbar-dark")
   .css("background-color", bgColor ? "rgba(15,18,65,0.9)" : 
         setTimeout(function(){return "rgba(15,18,65,0)";}, 1000) 
       );

You can check this answer here https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor but it won't cover for color transparency. — darklightcode, Oct 08 '18 at 10:20

score 1 · Accepted Answer · edited Oct 08 '18 at 09:30

1

Use if and put setTimeout() in else block

if (bgColor) {
    $(".navbar-dark").css("background-color", "rgba(15,18,65,0.9)")
} else {
    setTimeout(function () {
        $(".navbar-dark").css("background-color", "rgba(15,18,65,0)");
    }, 1000);
}

edited Oct 08 '18 at 09:30

Beri

11,470
4
35
57

answered Oct 08 '18 at 09:29

Satpal

132,252
13
159
168

This works, I wanted to try writing it as compact as I could but hey if it works it works. – Garneto Oct 08 '18 at 11:17

score 1 · Answer 2 · answered Oct 09 '18 at 02:28

1

Like an alternative, you can use delay() method of JQuery, like this:

if (bgColor)
    $(".navbar-dark").css("background-color", "rgba(15,18,65,0.9)");
else
    $(".navbar-dark").delay(1000).css("background-color", "rgba(15,18,65,0)");

answered Oct 09 '18 at 02:28

Shidersz

16,846
2
23
48

score 0 · Answer 3 · edited Oct 09 '18 at 02:22

0

Just set the variable, then return out of the function with a blank value:

$(".navbar-dark").css("background-color", bgColor ? "rgba(15,18,65,0.9)" : 
     setTimeout(function(){bgColor = "rgba(15,18,65,0)"; return;}, 1000) 
 );

edited Oct 09 '18 at 02:22

Community

1
1

answered Oct 08 '18 at 09:27

Jack Bashford

43,180
11
50
79

jQuery .css() if statement, timeout string isn't working?

3 Answers3