jQuery中的.animate（）函数不起作用滑动图像

Question

Code:

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

When i run a console.log i get into the click function, so that ain't a problem. It seems my div just doesn't want to get animated.

My CSS code (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);
    }
  }

Any toughts? It's freaking me out.

Cheers. W.

Answer 1

You shouldn't need the +=

Try this:

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

Also to use right and left you need an absolutely positioned element. In order to position something absolutely you need it's container to be position relatively.

So change your css to this:

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