1

我有两个要同时闪烁的 div，直到用户将鼠标悬停在其中一个上。

var shouldiblink = '1';

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

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

我将有一个悬停事件，将 shouldiblink 设置为“0”。问题是一旦页面准备好并且浏览器崩溃，循环就会开始。

我坚持这个解决方案，我现在想不出替代方案。

你能帮助我吗？

非常感谢你。

4

4 回答 4

4

我认为更好的方法是使用 setInterval 和 clearInterval。

加载页面后，使用 setInterval 来获得效果。当用户将鼠标悬停在元素上时，然后使用为 setInterval 获得的间隔 id 清除间隔。

查看工作演示。

于 2010-03-15T10:24:02.563 回答
2

一种替代方法 -Pulsate来自jQuery UI的效果。

从 google API 中包含它以提高性能。

如果您想推出自己的解决方案，您可能会发现检查脉动效果的源代码很有用。

于 2010-03-15T10:23:38.087 回答
1

尽管我讨厌这个<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');
 });
于 2010-03-15T10:32:43.643 回答
1

这是使用 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);
            });
        });
    }
}
于 2013-03-05T01:00:12.650 回答