Javascript 更改“；对"；/&引用；“左”；缓慢地

我有5个图像被包装在一个绝对定位的div中。当我单击“下一步”按钮时，我将div设置为右：0，当我单击“上一步”按钮时，我将div设置为左：0

因此，它的行为类似于图像的水平滑块

我现在需要的是为这个过渡添加动画。我想让这个潜水艇慢慢移动

我试过这个：

$（'.slider'）。设置动画（{right:'0'}，1000）

而不是
$（'.slider'）.css（'right'，'0'）

但它不起作用。div向右移动，没有动画

以下是带有代码段的代码：


$（'.arrow right'）。在（'click'，function（）{
$（'.slider'）.attr（'style'，''）；
$（'.slider'）.css（'right'，'0'）；
$（'.arrow'）.toggle（）；
});
$（'.arrow left'）。在（'click'，function（）上{
$（'.slider'）.attr（'style'，''）；
$（'.slider'）.css（'left'，'0'）；
$（'.arrow'）.toggle（）；
});
.container{
高度：130像素；
边缘底部：20px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
背景：灰色；
宽度：420px；
}
.阿罗{
文本对齐：居中；
利润上限：4倍；
字号：26px；
光标：指针；
显示：块；
}
.左箭头{
背景：rgba（255255,0.8）；
填充：10px；
左侧填充：2px；
边框右上角半径：30px；
边框右下半径：30px；
位置：绝对位置；
左：0；
顶部：47px；
颜色：#4c；
光标：指针；
z指数：999；
}
.向右箭头{
背景：rgba（255255,0.8）；
填充：10px；
右侧填充：2px；
边框左上半径：30px；
边框左下半径：30px；
位置：绝对位置；
右：0；
顶部：47px；
颜色：#4c；
光标：指针；
z指数：999；
}
.滑块{
位置：绝对位置；
}
.滑块img{
高度：130像素；
宽度：130px；
}
.隐藏{
显示：无；
}
您无法设置从
左：0
到
右：0
的绝对俯冲动画

您需要计算左位置并从0设置动画到新的左。

还有
$（'.slider'）.attr（'style'，''）
将删除
位置：绝对
，因此只需对其进行注释即可

$('.arrow-right').on('click', function() {  
    //$('.slider').attr('style', '');
    var left = $('.slider').outerWidth() - $('.container').outerWidth();
    $('.slider').animate({left:'-'+left+'px'}, 1000);
    $('.arrow').toggle();
});

$('.arrow-left').on('click', function() {
    //$('.slider').attr('style', '');
    $('.slider').animate({left:'0'}, 1000);
    $('.arrow').toggle();
});    

请参见此
您无法设置从
左：0
到
右：0
的绝对俯冲动画

您需要计算左位置并从0设置动画到新的左。

还有
$（'.slider'）.attr（'style'，''）
将删除
位置：绝对
，因此只需对其进行注释即可

$('.arrow-right').on('click', function() {  
    //$('.slider').attr('style', '');
    var left = $('.slider').outerWidth() - $('.container').outerWidth();
    $('.slider').animate({left:'-'+left+'px'}, 1000);
    $('.arrow').toggle();
});

$('.arrow-left').on('click', function() {
    //$('.slider').attr('style', '');
    $('.slider').animate({left:'0'}, 1000);
    $('.arrow').toggle();
});    

看到这个了吗