CODEWITHSUNDEEP
javascriptjqueryanimation
Koiski
Koiski

Reputation: 568

Moving div right and left on click

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;
    });
}

Upvotes: 1

Views: 1716

Answers (8)

Travis Watson
Travis Watson

Reputation: 1749

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;
});

Upvotes: 3

colestrode
colestrode

Reputation: 10658

Try this:

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

Upvotes: 0

lbstr
lbstr

Reputation: 2832

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/

Upvotes: 3

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

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/

Upvotes: 3

Jibran K
Jibran K

Reputation: 885

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;
        }
    });

Upvotes: 0

Skyp
Skyp

Reputation: 1197

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;
    }
});

Upvotes: 0

user188654
user188654

Reputation:

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.

Upvotes: 1

Related Questions