jQuery - jCarousel - FadeIn

Question

我使用该插件的jCarousel(http://sorgalla.com/projects/jcarousel/)而非图像滑入(如在"旋转木马与自动滚动"演示)

我希望图像淡入.使用是一个自动滚动的jCarousel,一次只显示一个元素.但我查看了Cycle插件,但它似乎与我的场景无关,因为我要显示的元素包含文本和图像.

谢谢,如果有人可以帮助这个.

菲尔

Answer 1

即使jCarousel只知道滚动幻灯片,您也可以模拟淡入淡出效果:

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

function mycarousel_fadeOut(carousel) {
    var JCcontainerID = carousel.clip.context.id;
    $('#' + JCcontainerID).fadeOut();
}

function mycarousel_fadeIn(carousel) {
    var JCcontainerID = carousel.clip.context.id;
    $('#' + JCcontainerID).fadeIn();
}

这样,您可以在滚动动画开始之前淡出容器,并在完成后将其淡入淡出而不会看到除淡化效果之外的任何其他内容.

Answer 2

试试这个:

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);
    });