使用responsiveSlides.js进行交叉淡入淡出

Question

我正在使用ResponsiveSlides.js并希望幻灯片交叉淡入淡出，而不是fadeOut和fadeIn。有人知道怎么做。它使用css3和查询回退。这是脚本的代码：

// Fading animation
slideTo = function (idx) {
    settings.before(idx);
    // If CSS3 transitions are supported
    if (supportsTransitions) {
        $slide
          .removeClass(visibleClass)
          .css(hidden)
          .eq(idx)
          .addClass(visibleClass)
          .css(visible);
        index = idx;
        setTimeout(function () {
            settings.after(idx);
        }, fadeTime);
      // If not, use jQuery fallback
    } else {
        $slide
          .stop()
          .fadeOut(fadeTime, function () {
            $(this)
              .removeClass(visibleClass)
              .css(hidden)
              .css("opacity", 1);
          })
          .eq(idx)
          .fadeIn(fadeTime, function () {
            $(this)
              .addClass(visibleClass)
              .css(visible);
            settings.after(idx);
            index = idx;
          });
      }
};

Answer 1

他们 在http://responsiveslides.com/的默认演示中交叉淡入淡出 见下面的截图。

Answer 2

我明白了！使用自定义缓动功能，使它们足够重叠以覆盖背景！

使用此： visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)"}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)"} ,

替换它： visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},