jquery - 如何为几乎相同的图像设置平滑过渡？

Question

我有一系列 3 张图像，我将它们放入无序列表中。图像几乎相同，只有一小部分图像发生了变化。这样我就得到了一种“电影”的效果。

我使用jquery 循环插件。

我遇到了一个问题，我似乎无法弄清楚如何将过渡设置为如此平滑，从而将图像融合到另一个图像中。现在一个图像淡出，另一个淡入......这导致图像之间出现闪光......

谁能分享一个平滑混合几乎相同图像的示例？

Answer 1

更新：

我已将过渡修改为几乎不显眼地淡出，使其看起来就像每张幻灯片只淡入。您可能需要更改速度、延迟和/或超时属性以匹配您想要完成的内容。

http://jsfiddle.net/lucuma/tcRCj/12/

过渡：

$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
    $slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr, next, opts);
        opts.cssBefore.opacity = 0;
    });
    opts.animIn = {
        opacity: 1
    };
    opts.animOut = {
        opacity: .99
    };
    opts.cssBefore = {
        top: 0,
        left: 0
    };
};

原来的：

最接近超级平滑过渡的方式是这样的：

$('#slideshow').cycle({fx:'fade', continuous:1, timeout:0, easeIn: 'linear', easeOut: 'linear'});​

演示：http: //jsfiddle.net/lucuma/tcRCj/6/

这也适用于水平/垂直效果。

第 2 轮：

我已将 jsfiddle 更新为一个名为 Smooth 的新自定义 fx：

http://jsfiddle.net/lucuma/tcRCj/12/

您可能需要尝试以下速度：

$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
    $slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr, next, opts);
        opts.cssBefore.opacity = 0;
    });
    opts.animIn = {
        opacity: 1
    };
    opts.animOut = {
        opacity: .99
    };
    opts.cssBefore = {
        top: 0,
        left: 0
    };
};


$('#slideshow').cycle({
    fx: 'smooth',
    continuous: 1,
    speed: 300,
    easeIn: 'linear',
    easeOut: 'linear'
});​