如何使用jQuery animate()方法使div左右移动？

Question

请看看这个:

http://jsfiddle.net/tmPfV/

如果单击右键,则框向右移动;如果单击左键,则框向左移动.但是,如果再次单击右键,则没有...

我怎样才能让它随心所欲地左右移动而不是一轮工作而不再工作？

此外,如果你先左,然后右,它也会搞砸,怎么解决？

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>

Answer 1

第二次尝试动画时,它已经从第一个动画中剩下30px左右定位.

至于它为何在左侧动画开始时跳跃; 主体有填充,因此默认情况下滑块使用填充缩进.当我们left在动画开始时将属性设置为0时,它会跳转到填充之外(到0px左侧的绝对位置).应用0px的身体填充来修复它.

http://jsfiddle.net/MbJJ6/

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