jquery는 div의 배경 이미지를 페이드 인 및 페이드 아웃합니다.

일련의 이미지를 배경으로 div 자동 회전을 시도했습니다. 페이드는 번쩍이고 교차하지 않습니다. 생각은 CSS를 통해 이미지를 교환하고 새로운 하나를 퇴색시키기 위해 jquery를 사용하는 것입니다. 좋은 크로스 오버가 좋을 수도 있습니다. 이것은 꽤 가벼운 무게입니다 - 또는 그렇게 보이고 오히려 플러그인을 사용하지 않을 것입니다.jquery는 div의 배경 이미지를 페이드 인 및 페이드 아웃합니다.

왜 부드러운 크로스 오버/트랜지션을 얻지 못했는지에 대한 통찰력이 있습니까?

setInterval(delayFunction, 10000); 

    function delayFunction() { 

     setTimeout(function(){ 
     $('#homeback').fadeOut('slow');  
     $('#homeback').css("background-image","url(images/home_02.jpg)").fadeIn('slow'); 
    },5000); 

     setTimeout(function(){ 
     $('#homeback').fadeOut('slow');  
     $('#homeback').css("background-image","url(images/home_03.jpg)").fadeIn('slow'); 
    },10000); 

     setTimeout(function(){ 
     $('#homeback').fadeOut('slow');  
     $('#homeback').css("background-image","url(images/home_04.jpg)").fadeIn('slow'); 
    },15000); 

     setTimeout(function(){ 
     $('#homeback').fadeOut('slow');  
     $('#homeback').css("background-image","url(images/home_01.jpg)").fadeIn('slow'); 
    },20000); 

    };

출처

2013-09-26 Stuff

fadeOut이 완료된 후 배경 이미지를 변경해야합니다. 아니요? –

새로운 배경 이미지 및 fadIN 기능의 적용은 서로 관련이 없으므로 두 이미지를 서로 겹쳐서 각 이미지의 알파 채널을 동시에 조정해야합니다. 나는 지금 내 전화에있다. 그러나 이것이 내일 대답하지 않으면 나는 그것에 대해 조사 할 것이다. –

당신은 회전의 간단한 예 내 jsfiddle을 확인하려면 다음 http://jsfiddle.net/3yN8a/2/

코멘트가 페이드 아웃이 완료된 후에는 배경 이미지를 조정해야 할 권리이며, 당신이 그 두 번째를 전달하여 옵션은 완료시 콜백으로 사용됩니다.

$(selector).fadeout('speed',function(){ 
    //execute your background switch then fade in. 
});

출처

2013-09-26 01:50:15 Chausser

jquery는 div의 배경 이미지를 페이드 인 및 페이드 아웃합니다.

답변

관련 문제