div 백그라운드 불투명도가 jquery를 사용하여 계속 변경됩니다.

Question

div 배경 불투명도를 100 %에서 0 %로, 다시 0 %에서 100 %로 연속 변경하고 싶습니다. jQuery로 어떻게하면 될까요? 다음은 현재 마크 업과 CSS입니다.

HTML

<div id="sample_div"> 

</div> 

CSS

#sample_div{ 
    width:300px; 
    height:200px; 
    background:#65c6ed; 
} 

Answer 1

당신은 어느 것을, 또는 fadeIn 및 fadeOut 할 jQuery의 animate 기능을 사용할 수는 기본적으로 래퍼. 예 (live copy)의 경우 :

(function() { 
    var div = $("selector_for_your_div"); 

    doFadeIn(); 

    function doFadeIn() { 
     div.fadeIn("slow", doFadeOut); 
    } 

    function doFadeOut() { 
     div.fadeOut("slow", doFadeIn); 
    } 
})(); 

그렇지 않으면 영원히가는 유지하기 때문에 당신은,하지만, 거기에 종료 조건을 넣을 수 있으며 그 빠른 된 가져옵니다.

(function() { 
    var div = $("#target"), 
     countdown = 3; 

    doFadeIn(); 

    function doFadeIn() { 
     div.fadeIn("slow", doFadeOut); 
    } 

    function doFadeOut() { 
     if (--countdown >= 0) { 
      div.fadeOut("slow", doFadeIn); 
     } 
    } 
})(); 

---

업데이트 : 예 (live copy)에 대한 그래서 당신은 당신이 배경 색상을 애니메이션을 적용 할 아래 말했다했습니다. 위와 같은 원칙이지만, jQuery 자체만으로는 색상을 애니메이션화 할 수 없습니다. color plug-in이 그것을 수행 할 수 있습니다 (시도하지 않았습니다). jQuery UI는 animate까지 확장합니다. 예 (live copy)의 경우 :

(function() { 
    var div = $("#target"), 
     counter = 3; 

    doFadeIn(); 

    function doFadeIn() { 
     div.animate({ 
     backgroundColor: "#eeeeee" 
     }, "slow", doFadeOut); 
    } 

    function doFadeOut() { 
     if (--counter >= 0) { 
     div.animate({ 
      backgroundColor: "#ffffff" 
     }, "slow", doFadeIn); 
     } 
    } 
})();