Why is my if/else JS statement using jQuery not working?

Question

I was playing around with the code from the w3schools editor which illustrates a jQuery animate function.

I want to try and make this movement reversible though, so I added an if/else statement to allow the div to move back if it had already been clicked.

Here is my code for between the script tags:

var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: amount,
                opacity: '0.5',
                height: '150px',
                width: '150px'
            });
            clicked = false;
        }

    });
});

I am aware there is probably a better way of doing this, but I am fairly new to jQuery. In any case seeing as jQuery is just extended JavaScript it seems strange that this doesn't work.

--- update: corrected amount not being set and included full page code ---

Here is my new code. The div still doesn't move back when clicked again.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                left: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                right: '250px'
            });
            clicked = false;
        }
    });
});

</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

left and right don't cancel each other, to make it go back you have to set left: 0 — Vale
– Vale, Commented Jul 24, 2015 at 16:32
Yeah I realised that... which I reflected in my answer below. Thanks! — Aron
– Aron, Commented Jul 24, 2015 at 16:33

Alex Tartan · Accepted Answer · 2015-07-24 16:29:02Z

2

It's failing because you're not setting amount!

var clicked = false;
var amount = 0;
$(document).ready(function(){
   //more code that calls `amount`
})

Check this JSFiddle to see it in action: http://jsfiddle.net/1xt58q0a/1/

New JSFIddle to match updated question: http://jsfiddle.net/1xt58q0a/5/

edited Jul 24, 2015 at 16:29

answered Jul 24, 2015 at 16:18

Alex Tartan

6,84410 gold badges37 silver badges47 bronze badges

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

2 Comments

Aron Over a year ago

Woops, good point! That's a remnant from a past attempt. Your code does work, however my corrected code still doesn't work. I will include the new code as an edit.

Vale Over a year ago

There's actually a few reasons more, for one, the properties in both animation states are the same, also, there's no div to animate in your fiddle...

LarsW · Accepted Answer · 2015-07-24 16:28:46Z

1

You can use the .toggle() function.

$(document).ready(function(){
   $("button").toggle(
      function(){
         $("div").animate({
            left: amount,
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
     },
     function(){
        $("div").animate({
           right: amount,
           opacity: '0.5',
           height: '150px',
           width: '150px'
        });
     }
   );
});

I assume you have set amount to a value in advance.

The div doesn't change because the opacity, height and width are set the same in both options.

answered Jul 24, 2015 at 16:28

LarsW

1,5881 gold badge13 silver badges28 bronze badges

Comments

Aron · Accepted Answer · 2015-07-24 16:29:40Z

Embarrassing, but my mistake was a misunderstanding of CSS, not JS.

Here is the corrected - and functioning - code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
var clicked = false;
$(document).ready(function(){
    $("button").click(function(){
        if (clicked == false){
            $("div").animate({
                marginLeft: '250px'
            });
            clicked = true;
        } else {
            $("div").animate({
                marginLeft: '0px'
            });
            clicked = false;
        }
    });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

Collectives™ on Stack Overflow

Why is my if/else JS statement using jQuery not working?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related