자바 스크립트를 사용하여 이미지에서 이미지로 페이딩 (이미지에서 화이트에서 이미지로 변환되지 않음)

Question

이미지가 서로 페이드 인 및 페이드 아웃되는 "슬라이드 쇼"유형의 기능이 있습니다. 그것은 잘 작동하지만, 사라질 때 첫 번째 그림을 흰색으로 페이드 아웃하고 두 번째 그림이 페이드 인됩니다. 원하는 것은 첫 번째 이미지가 오른쪽에서 두 번째로 사라지는 것입니다 (사이에 빈 흰색 배경 없음). 내가 할 수 있을까? 여기

은 예입니다 http://jsfiddle.net/aegtjm5y/5/

이미지

<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;"> 

JS는

var curIndex = 0; 
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg']; 
var fadeTimeInMilliseconds = 2000; 
var waitTimeInMilliseconds = 1000; 

$(document).ready(function(){ 
    switchImageAndWait(true); 
}); 

function switchImageAndWait(fadeOut2){ 
    if(fadeOut2){ 
     setTimeout(fadeOut, waitTimeInMilliseconds); 
    }else{ 
     var index = Math.floor((Math.random()*src.length)) 
     if(curIndex == index){ 
      index++; 
      if(index >= src.length){ 
       index-=2; 
      } 
     } 
     curIndex = index; 
     $("#image1").attr("src", src[index]); 
     fadeIn(); 
    } 
} 

function fadeOut(){ 
    $("#image1").fadeTo(fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); }); 
} 

function fadeIn(){ 
    $("#image1").fadeTo(fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); }); 
} 

Answer 1

편집 : "나는이 작업을 수행 할 수 있습니까?" - 아니. 하나의 이미지 요소 만 사용하면됩니다.

기본적으로 필요한 것은 두 이미지를 겹쳐서 표시하는 것입니다.

나는 당신의 바이올린을 편집하고 그것을 잘 작동하고 : JSFiddle

그래서 기본적으로 내가 다른 IMG 요소를 추가하고 절대 할 이미지의 위치를 ​​설정 (그래서 그들은 중첩된다).

<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;"> 

나는 이미지가 fadeIn 및 페이드 아웃 "이벤트"모두 변경 얻을 수 있도록 자바 스크립트 물건을 업데이트했습니다. 원리는 상층 이미지가 희미 해져서 사라진다는 것입니다. 보이지 않을 때는 src를 변경합니다. 그리고 그것이 보이면 하단 이미지의 src를 변경합니다.

나는 지금 더 나은 해결책을 생각할 수 없다. 희망이 .. ..