아이템을 깜박입니다. (jQuery fadein fadeout?)

Question

사용자가 마우스 중 하나에 마우스를 떠날 때까지 동시에 깜박임하고 싶은 두 개의 div가 있습니다.

var shouldiblink = '1';

function mrBlinko(divid){
 while (shouldiblink =='1') {
 $("#"+divid).fadeIn(100).fadeOut(300);
}

$(document).ready(function(){
 mrBlinko("mydiv1");
 mrBlinko("mydiv2");
}

나는 '0'으로 설정하는 호버 이벤트가 있습니다. 문제는 페이지가 준비되고 브라우저가 충돌하자마자 루프가 시작된다는 것입니다.

나는이 솔루션을 고수하고 지금은 대안을 생각할 수 없습니다.

도와주세요?

매우 감사합니다.

Answer 1

더 좋은 방법은 SetInterval과 Clearinterval을 사용하는 것입니다.

페이지가로드되면 SetInterval을 사용하여 효과를 얻습니다. 사용자가 요소 위로 마우스를 호버링하면 SetInterval에 달성 된 간격 ID를 사용하여 간격을 지 웁니다.

a 작동하는 데모.

Answer 2

대안 중 하나 - Pulsate 효과 jQuery UI.

성능을 향상시키기 위해 Google API에 포함 시키십시오.

---

자신의 솔루션을 굴려 보려면 유용한 체크 아웃을 찾을 수 있습니다. 소스 코드 맥동 효과.

Answer 3

내가 미워했던만큼 <blink> 태그, 이것을 시도하십시오 :

$.fn.blink = function(opts) {
   // allows $elem.blink('stop');
   if (opts == 'stop') {
     // sets 'blinkStop' on element to true, stops animations, 
     // and shows the element.  Return this for chaining.
     return this.data('blinkStop', true).stop(true, true).show();
   }

   // we aren't stopping, so lets set the blinkStop to false,
   this.data('blinkStop', false);

   // load up some default options, and allow overriding them:
   opts = $.extend({}, {
     fadeIn: 100,
     fadeOut: 300
   }, opts || {} );

   function doFadeOut($elem) {
     $elem = $elem || $(this); // so it can be called as a callback too
     if ($elem.data('blinkStop')) return;
     $elem.fadeOut(opts.fadeOut, doFadeIn);
   }
   function doFadeIn($elem) {
     $elem = $elem || $(this);
     if ($elem.data('blinkStop')) return;
     $elem.fadeIn(opts.fadeIn, doFadeOut);
   }
   doFadeOut(this);
   return this;
 };

 // example usage - blink all links until you mouseover:
 // takes advantage of the jQuery.one() function so that it only calls the 
 // stop blink once
 $('a').blink({fadeIn: 500, fadeOut: 1500}).one('mouseover', function() { 
   $(this).blink('stop') 
 });

 // 30 seconds after we started blinking, stop blinking every element we started:
 setTimeout(function() { 
   $('a').blink('stop');
 }, 30000);

 // example that should do what you wanted:
 $("#mydiv1,#mydiv2").blink().one('mouseover', function() {
   $(this).blink('stop');
 });

Answer 4

다음은 jQuery의 완료 콜백을 사용한 대체 솔루션입니다.

언제든지 요소에 'Selected-Pulsate'를 추가하고 setPulsate ()를 호출 할 수 있으며 맥동이 시작됩니다. 모든 현재 맥동기를 지우려면 클래스를 제거하고 숨겨 지도록 ClearEselection ()을 호출 할 수 있습니다.

CLEARSELECTION () [CLEARTIMEOUT ()]에 줄이 있어야합니다. 매우 기본적인 테스트에서는 해당 라인없이 작동하지만 해당 시점에서 타이머가 여전히 실행 중일 가능성이 있는지 확실하지 않습니다.

Fadeout () 완전한 콜백 내에서 RetureCall ()을 호출하면 스택 오버 플로우가 발생하는지 여부도 확실하지 않았으므로 10mmsec의 작은 값으로 Settimeout을 사용하여 직접 수행하는 대신 기능을 다시 호출했습니다.

var currentPulsatorId = -1;

function clearSelection() {
    if (currentPulsatorId != -1) {
        clearTimeout(currentPulsatorId); /* needed? */
        currentPulsatorId = -1;
    }

    var curElems = $('.selected-pulsate');
    $(curElems).removeClass('selected-pulsate');
    $(curElems).hide();
}

function setSelection(elems) {
    $(elems).addClass('selected-pulsate');
    setPulsate();
}

function setPulsate() {
    // trigger
    RepeatCall();

    function RepeatCall()
    {
        $('.selected-pulsate').fadeIn(400, function() {
            $('.selected-pulsate').fadeOut(400, function() {
                // set timeout quickly again
                // call externally to avoid stack overflow
                currentPulsatorId = setTimeout(RepeatCall, 10);
            });
        });
    }
}