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

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

code:

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

when run console.log click function, ain't problem. seems div doesn't want 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.

you shouldn't need +=

try this:

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

also utilize right , left need absolutely positioned element. in order position absolutely need it's container position relatively.

so alter css 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; }

javascript jquery jquery-animate slideshow