Comment faire de la div se déplacer à droite et à gauche à l'aide de jQuery animate() la méthode?

Veuillez jeter un oeil à ceci:

http://jsfiddle.net/tmPfV/

Si vous cliquez sur à droite de la boîte se déplace vers la droite et si vous cliquez sur le bouton gauche de la boîte se déplace de gauche. Toutefois, si vous cliquez sur à droite de nouveau, rien...

Comment puis-je obtenir pour vous déplacer à droite et à gauche autant de fois que j'aime au lieu de travailler pour un tour et puis ne fonctionne pas encore?

Aussi, si vous avez de l'horloge de gauche d'abord, puis à droite, elle a également mess up, comment faire pour résoudre ce problème?

jquery:

            $('.right').click(function(e) {
                e.preventDefault();
                $('#foo').animate({
                    'right' : '30px'    
                });                 
            });
            $('.left').click(function(e) {
                e.preventDefault();
                $('#foo').animate({
                    'left' : '30px'
                });                 
            });

html:

        <a href="" class="left">left</a> | <a href="" class="right">right</a>
        <br /><br />
        <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

OriginalL'auteur Remy | 2011-09-10