CODEWITHSUNDEEP
javascriptjqueryjquery-animateslideshow
Warre Buysse
Warre Buysse

Reputation: 1345

.animate() function in jQuery doesn't work sliding images

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.

Upvotes: 0

Views: 427

Answers (1)

Kolby
Kolby

Reputation: 2865

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

Upvotes: 1

Related Questions