Jquery Image Blinker?

Question

jquery를 사용하여 이미지를 깜빡 거리게 할 수 있습니까? 즉, 밝은 색으로 변색되고 몇 초 내에 되돌아와 루프가 반복됩니까? 이 문제에 대해 Flash를 사용하는 대신에 theres가 필요한지 궁금하십니까?

건배 폴

Answer 1

그때의 완료 콜백에서 반복적으로 이벤트를 트리거, 이미지에 사용자 정의 "fadeToggle"이벤트를 바인딩하고 이미지에 대한 jQuery를 데이터 저장소에 저장하는 값에 따라 효과 사이에 교환 좋을 것 각 애니메이션. 이것은 애니메이션을 멈추고 자 할 때 단순히 이벤트 바인딩 해제의 이점이 있습니다. 예를 들어

:

// Bind a custom event to your image object 
$("img").bind("fadeToggle", function() { 

    // Negate the current value of the fadeIn object in this element's data store 
    // Initial fire will set value to !null (which == true) 
    $(this).data("fadeIn", !$(this).data("fadeIn")); 

    // Create a callback function to recursively trigger the event at the end of either animation 
    var callback = function() { 
     $(this).trigger("fadeToggle"); 
    }; 

    // Test the value in the data store 
    if ($(this).data("fadeIn")) { 

     // Fade in and trigger the next fadeToggle event 
     $(this).fadeIn("slow", callback); 
    } else { 

     // Fade out and trigger the next fadeToggle event 
     $(this).fadeOut("slow", callback); 
    } 
}).trigger("fadeToggle"); // Trigger first event to start the chain 

는 작업 바이올린 here를 참조하십시오.

---

는 편집 :

일부 jQuery를 1.4.4 변경 기록을 통해 발생 후, 나는이 더 쉽게 만드는 .fadeToggle() 기능을 발견했습니다. 샘플 코드는 아래와 같습니다. 기본적으로 새로운 fadeToggle 애니메이션의 콜백에서 반복적으로 fadeToggle 이벤트를 트리거하는 동일한 모델로 구성됩니다.

$("img").bind("fadeToggle", function() { 
    $(this).fadeToggle("slow", function() { 
     $(this).trigger("fadeToggle"); 
    }); 
}).trigger("fadeToggle"); 

바이올린이 새 코드로 업데이트되었습니다.

Answer 2

당신은 배경 흰색으로 켜져 있고 불투명도 0 인 사업부를 오버레이하고 이미지가 밝아 보이게하는 불투명도를 증가시킬 수있다.

position: relative으로 표시된 컨테이너 div에 이미지를 놓은 다음 흰색 배경으로 position: absolute으로 div를 지정하여 이미지 위에 직접 나타나게하십시오. 단색 흰색 div의 불투명도에 애니메이션을 적용합니다.

<div class="container"> 
    <image src="etc" alt="etc"/> 
    <div class="fade"/> 
</div>