jQuery - jCarousel - 淡入效果

Question

我正在使用jCarousel插件（http://sorgalla.com/projects/jcarousel/），但是我希望图片不是像“自动滚动旋转木马”演示中那样滑动，而是淡入淡出。使用的是一个自动滚动的jCarousel，一次只显示一个元素。但是我查看了Cycle插件，似乎不能满足我的需求，因为我想要显示的元素包含文本和图像。

感谢任何能够帮助我的人。

Phil

- Phil

Answer 1

即使jCarousel只知道滚动幻灯片，您仍然可以模拟淡出效果：

$('#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(); 
}

这样做可以使滚动动画开始前淡出容器，结束后再淡入容器，而不会看到除了淡入淡出效果以外的任何东西。

- bebefx

---

嗨，这个解决方案似乎是正确的方法，但根本不起作用 - 当我使用它时，我得到了一个“未识别的表达式：#”错误，JCcontainerID保持为空。 - cukabeka

我也遇到了“未识别的表达式：#”错误！解决方法是使用$(carousel.clip.context).fadeOut();和$(carousel.clip.context).fadeIn();。 - Jekis

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

- ogaltsev

---

你如何实现额外的淡出效果/交叉淡化？ - flaudre

Answer 3

将函数更改为这个可以工作，有点效果（您可能仍会看到滚动）：

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

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

- Jamie

Answer 4

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

- stanleyhlng

Answer 5

对于0.3.x版本的jCarousel，我选择了以下内容：

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

一些使它工作的 CSS：

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

- Gappa

---

需要CSS才能使其正常工作。没有它，淡入效果将无法实现。 - Michael

是的，否则幻灯片（.i）将无法叠放在顶部。 - Gappa

Answer 6

Cycle 插件可以与文本和图片一起使用。请向下滚动到回调部分 此页面，以查看 Cycle 如何与文本配合工作。

- Andy Gaskell