div向右动画后，左侧的jQuery动画不会触发答案

【问题标题】：jQuery animation to the left won't trigger after the div is animated to the rightdiv向右动画后，左侧的jQuery动画不会触发
【发布时间】：2019-06-16 21:30:08
【问题描述】：

所以我在 jquery 中制作了一个简单的动画，通过单击左/右箭头将两行图像向左或向右移动。现在问题很奇怪，当我在加载后单击右箭头时，动画效果很好，带有图像的 div 动画向右并返回到原来的位置。但是当我尝试立即单击左箭头时，图像不会向左移动。但是，如果我按向左箭头然后向右，动画效果就足够了。所以基本上在向右动画之后没有回头，左箭头不起作用。

我不确定可能是什么问题，但我尝试以相同的方式为不同的元素设置动画，并注意到在将元素设置为右侧的动画后（并返回到初始位置）。如果你能帮我解决这个问题，我将不胜感激，我对 jQuery 还是很陌生，所以我可能在没有注意到的情况下犯了一个愚蠢的错误。

这是整个代码笔： https://codepen.io/Ellie555/pen/EBKPVp

我尝试了很多不同的东西，我以前认为问题在于动画结束后我切换了行中第一张和最后一张图像的顺序，但即使删除了那部分动画仍然不能正常工作。我尝试切换功能的顺序并将其全部放在一个功能下，但仍然没有帮助。

var distance = $('.first-row').children().last().outerWidth();
var images = $('.img-item');

$('.arrow-right').click(function(){
    images.animate({left: distance},400, function(){
        images.css('left', '0px'); 
    });
});


$('.arrow-left').click(function(){
    images.animate({right: distance},400, function(){
        images.css('right', '0px');
    });
});

【问题讨论】：

标签： javascript jquery jquery-animate

【解决方案1】：

css的“right”并不是指从右边几个像素点获取元素的坐标，而是从右往左计数，所以right: 0px;位于屏幕右侧。左：0px；位于屏幕左侧。所以如果你给元素一个 css right 属性，left 不会有任何效果。尝试：左键点击：

images.animate({left: '+=' + distance}, 400)

或右键：

images.animate({left: '-=' + distance}, 400)

希望对你有所帮助。

【讨论】：