Question

我有5个图像包裹在绝对定位的div中。当我点击＆＃34; next＆＃34;按钮我设置了div ID，当我点击＆＃34;之前＆＃34;按钮我设置了div right: 0。

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

我现在需要的是为此过渡添加动画。我希望这个div能够＆＃34;移动＆＃34;慢。

我试过了：

left: 0

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

但它没有用。 div在没有动画的情况下向右移动。

以下是带代码段的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

改变＆＃34;对＆＃34; /＆＃34;左＆＃34;慢慢地

1 个答案: