Question

我试图让这个闪烁的文字在3秒后（或3-5次闪烁）停止。我已经将眨眼率设置为大约正确的速度，但无法弄清楚如何让它停止。

以下是代码：

$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
    } else {
        elem.css('visibility', 'hidden');
    }    
}, 200);
});

有什么建议吗？

我在这里编译了一个jQuery小提琴：http://jsfiddle.net/M4Fcd/173/

Answer 1

setInterval无限期地继续 - 或直到停止。

您需要做的是在创建间隔时捕获intervalID，然后在完成间隔后清除间隔

var intervalID = setInterval(function....);

// when done
clearInterval(intervalID);

在您的特定情况下：

$('.blink').each(function() {
  var elem = $(this);
  // count the blinks
  var count = 1;
  var intervalId = setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
        // increment counter when showing to count # of blinks and stop when visible
        if (count++ === 3) {
            clearInterval(intervalId);
        }
    } else {
        elem.css('visibility', 'hidden');
    }    
  }, 200);
});

更新了小提琴http://jsfiddle.net/M4Fcd/186/

Answer 2

你也可以像这样使用fadeIn / fadeOut

$('.blink').each(function() {
    var elem = $(this);
    elem.fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100);
});

jsFiddle

Answer 3

$('.blink').each(function() {
    var elem = $(this);
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 200);
});


setTimeout(function(){
    clearInterval(refreshIntervalId);
}, 3000)

小提琴：http://jsfiddle.net/M4Fcd/176/

Answer 4

好的，有更好的方法。您可以使用 visibility：hidden 切换css类，代码变得更简单，如果您想在可见/不可见时停止，只需要使用 hasClass 进行检查。

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000,
        intervalId = setInterval(function() {
            elem.toggleClass('blink');
            if(timer > stopAfter && !elem.hasClass('blink')) {
                clearInterval(intervalId);
            }
            timer += interval;
        }, interval);
});

小提琴：http://jsfiddle.net/M4Fcd/183/

现在你可以在它可见或不可见时停止它，但这个想法是完全相同的。

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000;
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
            if(timer > stopAfter) {
                clearInterval(refreshIntervalId);
            }
        } else {
            elem.css('visibility', 'hidden');
        }
        timer += interval;
    }, interval);
});

小提琴：http://jsfiddle.net/M4Fcd/180/

Answer 5

试试这个：

var i = 0;
var blink;
$('.blink').each(function() {
  var elem = $(this);
  blink = setInterval(function() {
      if (elem.css('visibility') == 'hidden') {
          elem.css('visibility', 'visible');
          i++;
          if(i >= 3){
              clearInterval(blink);
          }
      } else {
        elem.css('visibility', 'hidden');
      }    
   }, 200);
});

Fiddle

Answer 6

我想我的答案最短。

function blinkElement(elm, interval, duration) {

    elm.style.visibility = (elm.style.visibility === "hidden" ? "visible" : "hidden");

    if (duration > 0) {
        setTimeout(blinkElement, interval, elm, interval, duration - interval);
    } else {
        elm.style.visibility = "visible";
    }
}

以200毫秒的速率闪烁3秒。

blinkElement(element, 200, 3000);

使文字闪烁一定次数？

6 个答案:

Fiddle