javascript - 淡入效果不互相重叠

我正在使用bxSlider。我想做的是一种淡入淡出效果，而项目之间不会相互折叠。

这是我要制作的：



旧项目将完全淡出，然后出现新项目。

这是一个过渡速度较低和较高的演示：http://jsfiddle.net/QLy7Q/2/

$('.bxslider').bxSlider({
  mode: 'fade',
  speed: 600,
  easing:'ease'
});

我还尝试了不同类型的宽松方法，但没有一种能如我所愿。 （在此处查看选项http://bxslider.com/options）

尽管我增加了“速度”参数，但它只会延长过渡时间，并且项目仍会相互重叠。 bxSlider有很多选项/回调，所以我相信可以实现，但是不知道如何实现。

最佳答案

噢，是的。我在同事的帮助下做到了。只需将fadeOut添加到onSlideBefore回调即可。

$('.bxslider').bxSlider({
  mode: 'fade',
  speed: 1200,
  easing: 'ease',
  onSlideBefore: function($slideElement, oldIndex, newIndex){
    $('yourSliderItem').eq(oldIndex).fadeOut(400);
  }
});

关于javascript - 淡入效果不互相重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24572015/