Moving div right and left on click

Question

I want to make div go left the first time i click on it, back to its original position the second time, left again the third etc..

So why isn't this working: http://jsfiddle.net/kS7KE/2/

    var checker = new Boolean();
checker = true;
if (checker = true){
    $("#div").click(function () {   
        $(this).animate({left: "10%"},400);   
        checker = false;
    });
}
if (checker != true){
    $("#div").click(function () {   
        $(this).animate({left: "30%"},400);   
        checker = true;
    });
}

Answer 1

Why so much code ? :)

var checker = true;
$("#div").click(function () {
    targetLeft = checker ? "10%" : "30%";
    $(this).animate({left: targetLeft},400);   
    checker ? checker = false : checker = true;
});

http://jsfiddle.net/kS7KE/5/

Answer 2

A few issues:

1. if (checker = true)

   You are using an assignment ( = ) rather than a check for equality ( == or === ).

2. Your check happens at bind time

   You want to check checker in your click event.

Soemthing like this will do the trick:

var checker = new Boolean();
checker = true;
$("#div").click(function () { 
    var left = checker ? "10%" : "30%";
    $(this).animate({left: left},400);   
    checker = !checker;
});

http://jsfiddle.net/lbstr/L4TN3/

Answer 3

First, don't use new Boolean() . Just initialize it like var checker = true;

Second, you're using an assignment operator in your first conditional ( checker = true ).

Third, you're not executing the conditional on each click.

Fourth, your code is pretty convoluted. Here's a sample:

var checker = true;
$('#div').click(function() {
    $(this).animate({
        left: checker ? "10%" : "30%"
    });
    checker = !checker;
});

Answer 4

You should not attach multiple event handlers to the same object which conflict with each other like you did. Here is a bit clearer and simpler version which does the same thing your code is supposed to do. As you can see it makes use of only one event handler.

var checker = true;
$('#div').click(function(){
    if(checker){
       $(this).animate({left: "10%"},400);   
       checker = false; 
    } else {
        $(this).animate({left: "30%"},400);   
        checker = true;
    }
});

Additionally you perform an assignment in your first if statement (single = ) instead of using == to compare your operands.

Answer 5

You need to assign the click event once, and do the logic in it : http://jsfiddle.net/kS7KE/2/

var checker = new Boolean();
checker = true;
$("#div").click(function () { 

if (checker == true){       
        $(this).animate({left: "10%"},400);   
        checker = false;
    }
else{

        $(this).animate({left: "30%"},400);   
        checker = true;
    }
});

Answer 6

Use this

    var checker = new Boolean();
checker = true;

    $("#div").click(function () { 
        if (checker == true){
        $(this).animate({left: "10%"},400);   
        checker = false;
            }
        else
        {
            $(this).animate({left: "30%"},400);   
        checker = true;
        }
    });

Answer 7

var checker = true;

$("#div").on('click', function () {
    if (checker == true) {
        checker = false;
        $(this).animate({
            left: "10%"
        }, 400);

    } else {
        $(this).animate({
            left: "30%"
        }, 400);
        checker = true;
    }
});

Demo

Answer 8

Try this:

var checker = true;
$("#div").on('click', function () {
    var left = checker ? '10%' : '30%';
    $(this).animate({left: left},400);   
    checker = !checker
});