views:

808

answers:

1

Hello,

For a project I would like to make a content banner that would switch between several "slides" (containing html, images etc). The "slides" are div elements. The slideIn effect used by jCarousel isn't what the guy wants, he wanst it to fadeIn/fadeOut the "slides" with each "slide" shown for 7 seconds.

Anyone know of a plugin that can achieve this?

P.s. I have tried to ask if anyone has created a fadeIn/fadeOut effect for jCarousel but the question hasn't had any response, so now I am willing to change the plugin for one that does this specific task.

+3  A: 

Have you seen the jQuery Cycle Plugin? It has a ton of different options, one of which is a fade effect. Just download the plugin code and then use the following

$(function() {
  $('div.slideshow').cycle({
    fx: 'fade', // choose the fade transition type
    timeout: 7000 // 7 second delay between fade in and fade out
  });
);

assuming your images are all sized the same and in a <div> with class="slideshow"

Russ Cam
I dismissed that plugin because it used img elements rather than div elements but will download it and try to see if it would work.
Phil
+1 for teaching me about a useful plugin!
Ian Storm Taylor
it's not limited to images. As the first link in my answer states "Images are used in these demos because they look cool, but slideshows are not limited to images. You can use any element you want."
Russ Cam
Thanks it works nearly perfect (except the text with fadeIn/fadeOut in firefox goes from fuzzy to sharp)
Phil
No problem. I believe the text rasterizing is down to the browser and not the plugin.
Russ Cam