How can I slide a DIV in jQuery?

Question

I'm looking for something in JQuery to allow a synchronized slide of a big div.

The div width can be increased runtime by other jquery functions.

I want to scroll the div horizontally, sliding 50px every second....is it possible to do this synch?

thank you all

Which direction is it sliding in and which edge do you want to move at 50px per second? — wheresrhys, Feb 09 '12 at 12:05
@Jivings: second and pixel are synch in scroll: 50px each second. — Michele, Feb 09 '12 at 12:29
Synchronized usually refers to something else in JavaScript. You just want a div to slide 50px a second. — Jivings, Feb 09 '12 at 12:31

Yoshi · Accepted Answer · 2012-02-09T12:32:29.530

1

Something like this?

(function slide() {
  $('#foo').animate(
    // move 50px to the left
    {left: '-=50px'},

    // in one second
    1000,

    // without easing 
    'linear',

    // recursive call on completion
    slide
  );
}());

edited Feb 09 '12 at 12:32

answered Feb 09 '12 at 12:09

Yoshi

54,081
14
89
103

does it slide only 50px? i want to slide all the div (for ex 3000px), 50px each second – Michele Feb 09 '12 at 12:27
@TrustWeb It will slide indefinitely. See the last parameter `slide`. – Yoshi Feb 09 '12 at 12:30
oh i see it is recursive...but how do you call this, $("#button").click(slide); ? – Michele Feb 09 '12 at 12:47
This is just a very basic example of how to have something running indefinitely. If you explain how you will use this, I can help you better. – Yoshi Feb 09 '12 at 14:01
thanks a lot.....for example, i would like to stop the slide once it slided all the #foo width. – Michele Feb 09 '12 at 14:40

How can I slide a DIV in jQuery?

1 Answers1