CODEWITHSUNDEEP
javascriptjqueryimagescrolljquery-animate
Hari krishnan
Hari krishnan

Reputation: 2108

Detect mouse scroll actions jQuery

I am developing a image gallery and was successful up to doing the scrolling. Images slide left and right when the mouse scrolls up and right respectively. I used animate({"top","left"},500) to animate images as sliding. But my problem is that when the mouse scrolls two or more times at once it takes 1000ms to complete because on each scrolling animation is called.

Is there any way to speed up the image animation with respect to mouse scroll speed?

I can't give you any code because I don't whether this can be done. ANY SUGGESTION ON HOW TO IMPLEMENT THIS?

EDIT

posn is an array with top and left, var posn = [{x:"50%",y:"50%"},{x:"40%",y:"70%"},{x:"30%",y:"90%"},{x:"30%",y:"10%"},{x:"40%",y:"30%"}];

$("#photo0").animate({"top":""+posn[0].x,"left":""+posn[0].y},500);
$("#photo1").animate({"top":""+posn[1].x,"left":""+posn[1].y},500);

There are 5 photos with #photo2,#photo3,#photo4

Upvotes: 1

Views: 695

Answers (1)

Matt Ball
Matt Ball

Reputation: 359786

You can debounce the scroll callback so that it isn't fired as frequently while scrolling. If you make sure it only fires every 500 ms (the same duration as your animation) the two should line up nicely.

Upvotes: 2

Related Questions