Thomas Leigh Diary

jQuery - Relative Animations

Some time ago I wrote a nice jQuery slider. I'm happy I've accomplished this - especially because before I needed to use Flash in order to gain similar effect. I'm still impressed and fascinated by jQuery/CSS potential - with the help of which You can be independent of such technologies as Flash/bitmap graphics, and even more important: You can save much time & effort :) (for example, I remember what it was like to make similar slider in Flash - ohh, it is incomparable :) ).

Back to the point: My slider contained a set of pictures which I wanted to slide forward/back (see Tags section on the top of this site). I also wanted the animation to be initiated on cursor's reaching particular area. But I encountered a small question: what to do if I need more than one scrolling? It looked like My slider could initiate animation only once in the same direction. But having more pictures I could be in the need of scrolling them more than once.

Fortunately I remembered one particular example from jQuery API Documentation in which You can initiate multiple moves in the same direction. So I thought I could find the solution there. And indeed, I've found it. But I am amazed how simple it turned out!

It didn't require even one additional line of code (!). Just this (the description of one of the examples):

"Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up."

When I took a closer look on the code I realized there is only a tiny difference between that code and Mine: instead of a single subtraction sign there was an equal sign added. That alone makes animation working as many times as You want :) .

On the same site You can find more explanation:

"Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property."

Incredible surprise :) . Thank You, jQuery :) !