0

当我单击“<<”和“>>”两个按钮之一时，我想让一张图片（火柴人图片）从左向右移动。这是我的代码，

function personLeft() {
                $('#img').animate({left:'50px'});
            }
function personRight() {
                $('#img').animate({right:'50px'});
            }

这是按钮，

<button id='left' onclick='personRight()'><<</button>
<button id='right' onclick='personLeft()'>>></button>

出于某种原因，这不起作用。它只会让他向右移动一次，或者向左移动一次。我试过这样做：

$(document).ready(function(){
    $('#left').click(function(){
        $('#img').animate({left:'50px'});
    });
    $('#right').click(function(){
        $('#img').animate({left:'50px'});
    });
});

但它只是做与函数相同的事情。如果您需要确切了解我的意思，请点击此处的链接。

所以，我想知道的是如何做到每次点击右键，它会向右移动 50 像素，每次点击左键，它都会向左移动 50 像素。

4

4 回答 4

1

您目前只是将其位置设置为 50px，您要做的是从其当前位置添加 50px：

$('#left').click(function(){
    $('#img').animate({
        left:'+=50px'
    });
});

检查http://www.w3schools.com/jquery/jquery_animate.asp - 使用相对值了解更多信息

于 2013-02-02T21:21:29.770 回答
0

您可以尝试将元素向左移动。

$('#left').click(function(){
    $('#img').animate({left:'-50px'});
});
于 2013-02-02T21:15:33.690 回答
0

向左移动，试试这个

$('#img').animate({left:'-50px'});
于 2013-02-02T21:16:29.897 回答
0

而不是直接指定，50px您需要从前一个值中添加或减去它。

尝试做类似的事情

$('#left').click(function(){
    var left = parseInt($('#img').css('left'));
    $('#img').animate({left:(left - 50) + 'px'});
});

和类似的东西#right

于 2013-02-02T21:18:03.043 回答