Question

I am trying to setup a simple example where a user can click a button on a page and divs are moved from one side of a parent div to another. If the button is clicked again the divs should move back to their original position.

I have successfully set this up, but the code feels a little clumsy to me. Can anyone recommend a cleaner way to do this than what I have done below:

var operator = '+=';
$('#clickme').click(function() {

    $('#main div:even').animate({
        left:operator + '200'
    }, 2000);

    if(operator == '+='){operator = '-=';}
    else{operator = '+=';}
});

The if/else at the end of my click event is the part that seems odd to me. Any suggestions for prettying this up?

You can play with the fiddle here:

http://jsfiddle.net/S6UtE/3/

Answer 1

I would keep the += and change the 200 to -200 and back again:

var move = 200;
$('#clickme').click(function() {
    $('#main div:even').animate({ 
        left:"+="+move
    }, 2000);
    move = -move;
});

http://jsfiddle.net/S6UtE/7/