jQuery animate() does not work with If-Else Statement

Question

JQuery beginner here. I'm trying to get a group of divs to change from red to blue when I click on them. When I click them again, I want the divs to change back to red. I tried using jQuery's animate() method (with the jQuery color plugin) to change the div's color. However, the code below only partially works.

$(document).ready(function(){

    $("div").click(function() {
        $("div").each(function() {
            if (this.style.color !== "blue") {
                $(this).animate({   
                    color:'blue'
                },1000);
            } else {
                this.style.color = "red";
            }
        });
    }); 
});

When I click a div, the if statement works fine. The divs change to blue. However, when I click a div again, the divs don't change back to red. The else statement doesn't seem to work. Any ideas on my mistake? The else statement works when I replace $(this).animate({...}) with this.style.color = "blue"; which so I think I'm doing something wrong with the animate() method.

Here is the HTML file

<!DOCTYPE html> 
<html> 
<head> 
    <title> each() test1 </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
    body{
        background-color: #000000;
        color: #ffffff;
    }
    div {
        font-size: 3em;
        color: #ff0000;
        text-align: center;
        cursor:pointer;
        font-weight: bolder;
        width: 300px;
    }
    </style> 
</head> 
<body> 
    <div> Click here </div> 
    <div> to iterate through </div> 
    <div> these divs </div> 
</body>
<script src="theJavaScriptFile.js"> </script> 
</html>

It’s likely never "blue". Please use the browser console (dev tools) (hit F12) and use console.log(this.style.color); to debug this. — Sebastian Simon
– Sebastian Simon, Commented Apr 13, 2017 at 23:56
if you console.log this.style.color right before the if statement, what do you get? — nixkuroi
– nixkuroi, Commented Apr 13, 2017 at 23:57
@nixkuroi nothing, the console.log worked, but it returned blank. — Alex Fidel Chen
– Alex Fidel Chen, Commented Apr 14, 2017 at 0:00

Hung Cao · Accepted Answer · 2017-04-14 00:33:35Z

1

Just don't use blue or red color codes. It will get converted to RGB code. For example this.style.color will be RGB(0,0,255) not blue so your expression always returns true no matter what color is it.

I create this example in different color mode for you to take a look https://jsfiddle.net/3tpncgr1/1/

Anyway, if you want to have special logic for particular color then keep using this approach. Otherwise, use class name instead of color code to determine. Because browsers always return rgb value for color attribute

edited Apr 14, 2017 at 0:33

answered Apr 14, 2017 at 0:03

Hung Cao

3,2083 gold badges22 silver badges29 bronze badges

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

6 Comments

Alex Fidel Chen Over a year ago

I tried your example. When I click a div, the divs turn blue, but they don't change back to red upon another click.

Hung Cao Over a year ago

Sorry, I fogot to save it. Try it here jsfiddle.net/3tpncgr1/1

Alex Fidel Chen Over a year ago

@HungCao Your example works thanks. I did notice that your example stops working when I take out the spaces between the commas, meaning I change rgb(0, 0, 255) to rgb(0,0,255). Any ideas why?

Hung Cao Over a year ago

because, you are comparing 2 strings. So it requires exact match. If you want to remove all spaces before comparing then use regex this.style.color.replace(/\s+/g, '') === 'rgb(0,0,255)'

Alex Fidel Chen Over a year ago

So my if statement's conditional cannot be (this.style.color !== "#0000ff") because the browser won't read "#0000ff" as the same as "rgb(0, 0, 255)"? Because the strings are not exactly the same?

|

JohnV · Accepted Answer · 2017-04-14 00:33:20Z

I would manage it by using a active class to control the states.

In that case I would succes changing

$(document).ready(function(){

    $("div").click(function() {
       $.each( $(this).parent().children("div"),function() {
            if (!$(this).hasClass('active')) {
              $(this).addClass('active');
                $(this).animate({   
                    color:'blue'
                },1000);
            } else {
              $(this).removeClass('active');
                this.style.color = "red";
            }
        });
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html> 
<html> 
<head> 
    <title> each() test1 </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
    body{
        background-color: #000000;
        color: #ffffff;
    }
    div.active{  }
    div {
        font-size: 1em;
        color: #ff0000;
        text-align: center;
        cursor:pointer;
        font-weight: bolder;
        width: 300px;
    }
    </style> 
</head> 
<body>
  <div id="containerOne">
    <div> Click here </div> 
    <div> to iterate through </div> 
    <div> these divs </div>
  </div>
    <div id="containerTwo">
    <div> Click here </div> 
    <div> to iterate through </div> 
    <div> these divs </div>
  </div>
</body>
<script src="theJavaScriptFile.js"> </script> 
</html>

Collectives™ on Stack Overflow

jQuery animate() does not work with If-Else Statement

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related