jQuery - jCarousel - FadeIn

Question

I am using the plugin jCarousel (http://sorgalla.com/projects/jcarousel/) and rather than the images slide in (like in the "Carousel with autoscrolling" demo)

I would like the images to fade in. The usage is a jCarousel that auto scrolls and only shows one element at a time. But I looked at Cycle plugin but it didn't seem to work with my scenario as the element I want to show contains text and an image.

Thanks if anyone can help with this.

Phil

Answer 1

You can simulate a fading effect even though jCarousel knows only to scroll the slides:

$('#yourContainer').jcarousel({
    visible: 1,
    scroll: 1, 
    itemLoadCallback: {
        onBeforeAnimation: mycarousel_fadeOut,
        onAfterAnimation: mycarousel_fadeIn
    }
});

function mycarousel_fadeOut(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeOut(); 
}

function mycarousel_fadeIn(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeIn(); 
}

This way you fade out the container before the scrolling animation begins and fade it back in after it's finished without seeing anything else than the fading effect.