거의 동일한 이미지에 대해 부드러운 전환을 설정하는 방법은 무엇입니까?

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 :

나는 새 사용자 정의 FX에 jsfiddle 업데이트되었습니다 부드러운라고 :

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