png 전환을위한 jQuery 사용

Question

아주 기본적인 질문입니다. 투명도가있는 png를 사용하는 매우 간단한 웹 디자인을 사용하고 다른 기본 이미지를 오버레이합니다. 여기서 아이디어는 주기적으로 가시성을 순환시키고, 더 긴 간격으로 표시하고, 빠르게 페이드 아웃하고, 더 긴 간격으로 보이지 않는 상태로 유지하는 것입니다. 기본적으로 애니메이션 GIF의 동작은 원래대로 복제됩니다. png는 none으로 설정된 표시로 시작됩니다.

내 문제는 jQuery가 여기에 도움이되는 "일시 중지"또는 "지연"이벤트 처리기가없는 것 같습니다. 간격을 메우는 수많은 플러그인이 있지만 간단한 방법이있는 경우에는 포함하지 않을 것입니다. 그 setInterval 또는 setTimeOut, 다시 떨어지는 필요가있을 수 있지만 구문을 잘 모르겠습니다.

--loop start-- 

$("#pngOverlay").fadeIn(1000); 

(5000 delay) // using setTimeout or setInterval if jQuery method unavailable 

$("#pngOverlay").fadeOut(1000); 

(5000 delay) 

--loop repeat-- 

다음 번 동작을 수행하므로이 작동 할 수 루프에 싸여 할 수 있다면 나는 생각하지만 우아한 나를 공격하지 않습니다

내가 개략적으로 원하는 것은 무엇인가이다 또는 올바른 방법.

setTimeout(function() { 
     $("#pngOverlay").fadeIn(1000); 
    }, 5000); 

    setTimeout(function() { 
     $("#pngOverlay").fadeOut(1000); 
    }, 10000); 

의견을 보내 주셔서 감사합니다. 나는 GIF 만 사용 하겠지만 투명성이 필요하다.

Answer 1

이와 비슷한?

setInterval(function() 
{ 
    var elm = $('#pngOverlay'); 
    if (elm.is(':hidden')) 
     elm.fadeIn(1000); 
    else 
     elm.fadeOut(1000); 
}, 5000); 

Answer 2

어떻게 animated PNG 사용에 대한 (예전에는 ... 우리는 GIF를 애니메이션에 사용하고 우리 는에게 그들을 좋아)?

Answer 3

jQuery에서 눈에 띄는 효과가없는 5000 밀리 초 동안 애니메이션을 수행하는 것이 하나의 트릭입니다.

$("#pngOverlay").animate({opacity:1}, 5000); 

항목의 불투명도가 시작하는 1 인 경우 다음은 눈에 보이는 효과가없는 있지만, 5 초 동안 일시 정지 않습니다.

Answer 4

<script language="JavaScript" type="text/javascript"> 
function showimage(){ 
    $("#pngOverlay").fadeIn(1000); 
    setTimeout('hideimage()',5000); 
} 

function hideimage(){ 
     $("#pngOverlay").fadeOut(1000); 
    setTimeout('showimage()',5000); 

} 
$(document).ready(function() { 
    showimage(); 
}); 
</script> 

그것의 위해 성가신 애니메이션을 가진