閃爍一個項目。 （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"); 
} 

我將有一個懸停事件，將shouldiblink設置爲'0'。問題是一旦頁面準備好並且瀏覽器崩潰，循環就會啓動。

我堅持這個解決方案，我現在想不到另一種選擇。

你能幫我嗎？

非常感謝。

Answer 1

我認爲更好的方法是使用setInterval和clearInterval。

頁面加載完成後，使用setInterval來獲取效果。當用戶將鼠標懸停在元素上時，使用setInterval獲得的間隔ID清除間隔。

查看working demo。

Answer 2

其中一個替代方案 - Pulsate從jQuery UI的影響。

包括谷歌API以提高性能。

---

如果你想推出自己的解決方案，你可能會發現有用檢查出的搏動效果source code。

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（），它將開始脈動。要清除所有當前的脈動器，您可以調用clearSelection（），這會刪​​除類並強制它被隱藏。

clearSelection（）[clearTimeout（）]中有一行，我不知道是否有必要。在我非常基本的測試中，它沒有這條線，但我不確定計時器是否有可能仍在運行，並導致問題。

我還不確定在fadeOut（）完成回調中調用RepeatCall（）是否會導致堆棧溢出，所以我使用setTimeout以10毫秒的小值重新調用該函數，而不是直接進行。

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); 
      }); 
     }); 
    } 
}