.animate（）功能不起作用滑动图片

Question

代码：

$("#previous_image").click(function(){ 
    $("#images").animate({"right": "+=250px"}, "slow"); 
    return false; 
}); 

当我运行的console.log我进入点击功能，所以这不是一个问题。看来我的div只是不想动画。

我的CSS代码（SASS）

#images_container{ 
    display: block; 
    margin-left: 39px; 
    width: 630px; 
    height: 81px; 
    overflow: hidden; 
} 

#images{ 
    display: block; 
    width: 1500px; 
    min-width: 650px; 


    img{ 
    margin-top: 7px; 
    display: inline-block; 
    height: 66px; 
    cursor: pointer; 

    filter: url(svg/filters.svg#grayscale); 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */ 

    transition: filter .3s ease-in-out; 
    -moz-transition: filter .3s ease-in-out; 
    -webkit-transition: filter .3s ease-in-out; 
    transition: -webkit-filter .3s ease-in-out; 
    -moz-transition: -webkit-filter .3s ease-in-out; 
    -webkit-transition: -webkit-filter .3s ease-in-out; 

    @include transition-property(-webkit-filter); 
    @include transition-duration(.3s); 
    @include transition-timing-function(ease-out); 

    &:hover{ 
     filter: none; 
     -webkit-filter: grayscale(0); 
    } 
    } 

任何toughts？它吓坏了我。

干杯。 W.

Answer 1

你不应该需要+=

试试这个：

$("#previous_image").click(function(){ 
    $("#images").animate({"right": "250px"}, "slow"); 
    return false; 
}); 

而且使用right和left你需要绝对定位的元素。为了定位绝对的东西，你需要它的容器相对位置。

所以你的CSS改成这样：

#images_container{ 
    display: block; 
    margin-left: 39px; 
    width: 630px; 
    height: 81px; 
    overflow: hidden; 
    position: relative; 
} 

#images{ 
    display: block; 
    width: 1500px; 
    min-width: 650px; 
    position: absolute; 
}