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

时间:2012-06-11 08:30:39

标签: jquery transition cycle jquery-cycle

我有一系列3张图片,我把它放到一个无序的列表中。图像几乎相同,只有一小部分图像在变化。这样我就得到了一部电影'有点效果。

我使用jquery cycle plugin

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

任何人都可以分享几乎相同图像的平滑混合示例吗?

1 个答案:

答案 0 :(得分: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/

这也适用于水平/垂直fx。

第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'
});​