페이드 효과를 사용하여 이미지를 교환 할 때의 문제

Question

이 사이트의 머리글에 http://www.ipallares.com 페이드 효과와 함께 이미지 스왑을 시도하고 있습니다. 꽤 간단한 jQuery로되어 있지만 이상한 행동을하고 있습니다. 제가 사용하고있는 코드는 다음과 같습니다 :

function changeImage(){ 
    var img_to_change = Math.floor(Math.random()*99)+1 
    var new_img = Math.floor(Math.random()*99)+1; 
    var new_img_url = 'https://liv.s3.amazonaws.com/ipallares/images/header/'+new_img+'.jpg'; 
    jQuery("#img_"+img_to_change).fadeTo(300, 0.001, 
     function(){ 
      jQuery("#img_"+img_to_change).attr("src", new_img_url); 
      jQuery("#img_"+img_to_change).fadeTo(500, 1); 
     } 
    ); 

    setTimeout("changeImage()", 1000); 

} 

1.jpg에서 100.jpg의 이미지가있는 디렉토리에서 이미지를 가져옵니다.

FF에서는 원래 이미지가 페이드 아웃 (실제로는 0.001로 페이드 아웃) 한 다음 페이드 인 (실제로는 1로 페이드 아웃) 한 후 새 이미지로 변경됩니다 (이미지가 한 번 변경되어야 함). 원래 '완전한'함수 콜백을 사용하면서 원래 0.001로 완전히 희미 해졌습니다. 그런 다음 새 이미지가 크기 조절 효과가 있습니다.

크롬에서는 조금 더 잘 작동하지만 무작위로 전체 함수 콜백이 예상대로 작동하지 않습니다.

내가 뭘 잘못하고 있니? 저는 jQuery 초보자입니다 만 이것은 매우 간단하며 jQuery는 매우 안정적인 크로스 브라우저 도구 여야합니다.

모든 해결 방법이나 조언은 감사하겠습니다.

Answer 1

http://jsfiddle.net/fZPdy/13/

당신은 이미지로드 한 후에 fadeIn을 설정해야한다, 그렇지 않으면 당신이 깜박 거리는거야. 이렇게하려면, 당신은 단지 load() 이벤트에 fadeIn를 추가해야합니다 : 그 후

$(this).load(function() { $(this).fadeIn(500); }); 

, 당신의 새로운 이미지 소스를 설정할 수 있습니다.

Answer 2

이 솔루션을 시도해보십시오

<script type="text/javascript"> 
jQuery(document).ready(function($) { 

//rollover swap images with rel 
    var img_src = ""; 
    var new_src = ""; 

    $(".img-swap").hover(function(){ 
     //mouseover 

     img_src = $(this).attr('src'); //grab original image 
     new_src = $(this).attr('rel'); //grab rollover image 
     $(this).attr('src', new_src); //swap images 
     $(this).attr('rel', img_src); //swap images 

    }, 
    function(){ 
     //mouse out 

     $(this).attr('src', img_src); //swap images 
     $(this).attr('rel', new_src); //swap images 
    }); 

    //preload images 
    var cache = new Array(); 
    //cycle through all rollover elements and add rollover img src to cache array 
    $(".img-swap").each(function(){ 
     var cacheImage = document.createElement('img'); 
     cacheImage.src = $(this).attr('rel'); 
     cache.push(cacheImage); 
    }); 
}); 
</script> 

을 ... 그리고 HTML 코드는 무언가 같이해야한다 :

<img src="original.jpg" rel="rollover.jpg" class="img-swap" />