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

score 6 · Answer 1 · answered Nov 27 '13 at 13:39

6

Try this:

var jcarousel = $('#yourContainer');

    jcarousel.jcarousel({
        animation: {
            duration: 0 // make changing image immediately
        }
    });

    // make fadeIn effect
    jcarousel.on('jcarousel:animate', function (event, carousel) {
        $(carousel._element.context).find('li').hide().fadeIn(1000);
    });

answered Nov 27 '13 at 13:39

ogaltsev

121
2
3

how would you do an additional fadeout effect / crossfade? – flaudre Sep 02 '16 at 08:24

score 6 · Answer 2 · edited Aug 29 '20 at 03:30

6

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.

edited Aug 29 '20 at 03:30

Nikit

5,128
19
31

answered Sep 14 '11 at 15:56

bebefx

61
1
2

2

Hi, this solution seems to be the right approach, but doesn't work at all - I got an "unrecognized expression: #" error when using this, the JCcontainerID stays empty. – cukabeka Mar 16 '12 at 10:09
2

I got this error "unrecognized expression: #" too! The solution is to use $(carousel.clip.context).fadeOut(); and $(carousel.clip.context).fadeIn(); instead. – Jekis May 06 '13 at 11:51

score 2 · Answer 3 · answered Mar 16 '12 at 13:00

Changing the functions to this works, sort of (you may still see the scroll too):

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

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

score 1 · Answer 4 · answered May 28 '12 at 08:37

var mycarousel_fadeOut = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeOut(800);
    }
};

var mycarousel_fadeIn = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeIn(800);
    }
};

score 1 · Answer 5 · answered May 07 '14 at 09:52

For the 0.3.x jCarousel version I went with this:

   var carousel = $('.jcarousel').jcarousel({
      list        : '.items',
      items       : '.i',
      wrap        : 'both', // for good measure
      animation: {
          duration: 0 // swap slides immediately
      }
   }).jcarouselAutoscroll({
      interval: 1000 * 5,
      target: '+=1',
      autostart: true
   });

   // fade hack
   carousel.jcarousel('items').hide();
   carousel.jcarousel('first').show();
   carousel.on('jcarousel:visiblein', function(event, carousel) {
      $(event.target).fadeIn();
   });
   carousel.on('jcarousel:visibleout', function(event, carousel) {
      $(event.target).fadeOut();
      carousel._trigger('animateend'); // the event doesn't fire when items are positioned absolutely (so autoscroll wouldn't work), fire manually
   });

some css to make it work:

   .items {height: 450px;}
   .i     {position: absolute;}

The CSS to make it work is required. The fade in effect will not work without it. — Michael, May 07 '14 at 22:17
Yes, otherwise the slides (.i) won't be on top (overlap) each other. — Gappa, May 12 '14 at 11:22

score 0 · Accepted Answer · answered Aug 15 '09 at 15:34

0

The Cycle plugin will work with text and an image. Scroll down to the Callbacks section on this page to see Cycle working with text.

answered Aug 15 '09 at 15:34

Andy Gaskell

31,495
6
74
83

jQuery - jCarousel - FadeIn

6 Answers6