javascript - jQuery Animate 和定位元素

Question

我目前有一个 div，其中有大约 5 张图像向左浮动，因此它们并排排列。现在我在父 div 中有这个 div，它有溢出：隐藏和宽度，所以它只能容纳 4 个图像。

除了动画之外，一切都很好，我有两个左右箭头，但可以说我按两次它会像往常一样移动，但是当我按下左键时，它会重置 div 的正常位置并继续，

$(".next").click(function(){
    $(".item_wrap").animate({right: "+=118px"}, 1500 );
    return false;
});
$(".prev").click(function(){
    $(".item_wrap").animate({left: "+=118px"}, 1500 );
    return false;
});

这是我目前正在使用的代码。

Answer 1

...但是可以说我按两次它会像往常一样移动但是当我按左一次它会重置 div 的正常位置并继续

那是因为你不能同时在同一个元素上设置动画left，right除非你真的希望元素被拉伸（在你的情况下它不会拉伸，因为你可能已经设置了一个静态元素宽度。）相反，你只动画一个通过加法和减法计算它们：

$(".next").click(function(){
    $(".item_wrap").animate({right: "+=118px"}, 1500 );
    return false;
});
$(".prev").click(function(){
    // Subtract from 'right' instead of adding to 'left'
    $(".item_wrap").animate({right: "-=118px"}, 1500 );
    return false;
});