Question

我想拍一张照片（火柴人照片）从左向右移动，因为我点击两个按钮中的一个说“＆lt;＆lt;”和“＆gt;＆gt;”。这是我的代码，

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

但它只是做了与功能相同的事情。如果您需要查看我的意思，请注意link。

所以，我想知道的是，每次点击右键时，它都能正确显示50个像素，每次点击左键时，它都会向左移动50个像素。

Answer 1

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

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

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

Answer 2

您可以尝试将元素移到左侧。

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

Answer 3

向左移动，试试这个

$('#img').animate({left:'-50px'});

Answer 4

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

尝试做类似

的事情

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

#right

的类似内容

jQuery两个按钮使图片从左向右移动

4 个答案: