jQuery 向右动画 div 动画后,不会触发向左动画
jQuery animation to the left won't trigger after the div is animated to the right
所以我在 jquery 中制作了一个简单的动画,通过单击 left/right 箭头将两行图像向左或向右移动。现在问题很奇怪,当我在加载后单击向右箭头时,动画效果很好,带有图像的 div 向右动画,returns 动画到它的原始位置。但是,当我随后尝试立即单击左箭头时,图像不会向左移动。但是,如果我按向左箭头然后向右箭头,动画效果就足够了。所以基本上在向右动画之后就没有回头路了,左箭头不起作用。
我不确定可能是什么问题,但我尝试以相同的方式为不同的元素设置动画,并注意到我不可能在向右设置动画(并返回)后向左设置元素的动画到初始位置)。如果你能帮助我,我将不胜感激,我对 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');
});
});
css"right"并不是说获取元素的坐标从右往右一些像素,而是从右往左数,所以right: 0px;位于屏幕右侧。左:0px;位于屏幕左侧。所以如果你给元素a css right 属性, left 不会有任何效果。尝试:
左键点击:
images.animate({left: '+=' + distance}, 400)
或
右键单击:
images.animate({left: '-=' + distance}, 400)
希望对你有所帮助。
所以我在 jquery 中制作了一个简单的动画,通过单击 left/right 箭头将两行图像向左或向右移动。现在问题很奇怪,当我在加载后单击向右箭头时,动画效果很好,带有图像的 div 向右动画,returns 动画到它的原始位置。但是,当我随后尝试立即单击左箭头时,图像不会向左移动。但是,如果我按向左箭头然后向右箭头,动画效果就足够了。所以基本上在向右动画之后就没有回头路了,左箭头不起作用。
我不确定可能是什么问题,但我尝试以相同的方式为不同的元素设置动画,并注意到我不可能在向右设置动画(并返回)后向左设置元素的动画到初始位置)。如果你能帮助我,我将不胜感激,我对 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');
});
});
css"right"并不是说获取元素的坐标从右往右一些像素,而是从右往左数,所以right: 0px;位于屏幕右侧。左:0px;位于屏幕左侧。所以如果你给元素a css right 属性, left 不会有任何效果。尝试: 左键点击:
images.animate({left: '+=' + distance}, 400)
或 右键单击:
images.animate({left: '-=' + distance}, 400)
希望对你有所帮助。