jQuery sliding content with css

Question

ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.

The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.

I was thinkin along the lines of using:

$(#id).fadeOut(*time*);

Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.

Answer 1

This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter() .

I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).

Answer 2

If a plugin works for you, I don't see the point in developing the whole thing again.

Recall that most plugins offer a minified version so size wouldn't be a matter.

You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.

If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.