如何爲幾乎相同的圖像設置平滑過渡？

Question

我有一系列的3張圖片，我將其放入無序列表中。圖像幾乎相同，只有一小部分圖像正在改變。這樣我得到一個'電影'有點效果。

我使用jquery cycle plugin。

我遇到了問題，我似乎無法弄清楚如何設置過渡到如此平滑的圖像混合到另一個。現在一個圖像淡出，另一個淡入...並且這導致圖像之間的閃光...

任何人都可以共享幾乎相同圖像的平滑混合的例子嗎？

Answer 1

更新：

我修改勉強noticably淡出，使得它看起來應該像每個幻燈片只有在變淡您可能需要改變速度，延遲和/或超時屬性相匹配的過渡。你正在嘗試完成。

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到一個新的自定義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' 
});​