时间戳

首页 > 解决方案 > div向右动画后，左侧的jQuery动画不会触发

javascript - div向右动画后，左侧的jQuery动画不会触发

问题描述

因此，我在 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');
    });
});

标签： javascriptjqueryjquery-animate

解决方案

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

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

或右键单击：

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

我希望我对你有所帮助。

推荐阅读