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

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.