闪烁一个项目。 （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); 
      }); 
     }); 
    } 
}