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