淡化效果不会相互重叠

Question

我正在使用bxSlider。我想要做的是淡化效果没有项目相互折叠。

这就是我想要做的：

旧项目将逐渐消失完全，然后会出现新项目。

这是一个具有低和高转换速度的演示：http://jsfiddle.net/QLy7Q/2/

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

我也尝试了不同类型的缓动方法，它们都没有按我的意愿工作。 （请参阅此处的选项http://bxslider.com/options）

虽然我增加了'speed'参数，但它只会扩展过渡时间并且项目仍然相互重叠。 bxSlider有很多选项/回调，所以我相信我能做到这一点，但无法弄清楚如何。

Answer 1

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

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