javascript - 慢慢改 "right"/"left"

Question

我有 5 张图片包裹在一个绝对定位的 div 中。当我点击“下一步”按钮时，我设置了 div 的 right: 0，当我点击“previous”按钮时，我设置了 div 的 left: 0。

因此它的行为类似于图像的水平 slider 。

我现在需要的是为这个过渡添加动画。我希望这个 div 缓慢“移动”。

我试过这个:

$('.slider').animate({right:'0'}, 1000);

代替 $('.slider').css('right','0');

但是没有用。 div 向右移动，没有动画。

这是带有片段的代码:

$('.arrow-right').on('click', function() {  
        $('.slider').attr('style', '');
        $('.slider').css('right','0');
        $('.arrow').toggle();
    });

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

.container {
    height: 130px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    background: grey;
    width: 420px;
}

.arrow {
    text-align: center;
    margin-top: 4px;
    font-size: 26px;
    cursor: pointer;
    display: block;
}

.arrow-left {
    background: rgba(255,255,255,0.8);
    padding: 10px;
    padding-left: 2px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    left: 0;
    top: 47px;
    color: #4c4c4c;
    cursor: pointer;
  z-index: 999;
}

.arrow-right {
    background: rgba(255,255,255,0.8);
    padding: 10px;
    padding-right: 2px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    position: absolute;
    right: 0;
    top: 47px;
    color: #4c4c4c;
    cursor: pointer;
  z-index: 999;
}

.slider {
    position: absolute;
}

.slider img {
    height: 130px;
    width: 130px;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="arrow hide">
                <i class="fa fa-chevron-left arrow-left"></i>
            </span>
  <div class="slider">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
  </div>
  <span class="arrow">
                <i class="fa fa-chevron-right arrow-right"></i>
            </span>
</div>

Answer 1

您不能制作从 left:0 到 right:0 的绝对俯冲动画。

您需要计算左侧位置并从 0 到新左侧设置动画。
此外，$('.slider').attr('style', ''); 将删除 position:absolute，因此只需对其进行注释即可。

$('.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();
});    

查看此 Fiddle