文本闪烁jQuery

Question

如何在jQuery中实现文本闪烁并停止闪烁？必须兼容IE、火狐和Chrome浏览器。谢谢。

- HP.

---

尝试这个：http://awesome-gallery.blogspot.com/2011/03/blinking-text-using-jquery.html - Ahsan

可能是<blink>的替代方案的重复问题。 - Léo Lam

Answer 1

对我来说，为了闪烁一些文本而使用插件似乎有点大材小用...

试试这个...

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

- alex

---

Alex，感谢你把眨眼标记带入21世纪，我所有的90年代模仿网站都由衷地感谢你 :) - Casey Rodarmor

@alex，能请你看看这里的一个关于jquery问题的不同主题：http://stackoverflow.com/questions/13137404/jquery-find-div-class-name-at-a-certain-position-while-scrolling？ - Istiaque Ahmed

你会如何在代码中使用它？- 对于这个可能是一个愚蠢的问题，我很抱歉。 - TheSteven

在这个例子中，任何带有 blink 类的元素都将应用此样式。因此，您可以像这样使用 <span class="blink">Blinky Bill</span>，然后在 DOM 准备就绪或类似情况下运行此代码。 - alex

Answer 2

试试使用这个闪烁插件

例如

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

它也是一个非常简单的插件，你可能会扩展它来停止动画并按需启动。

- barkmadley

---

我会使用闪烁标签，并使用jQuery检查浏览器是否为IE，如果不是，则使用此插件进行闪烁。 - Natrium

这真的值得花那么多的努力吗？ - barkmadley

barkmadley，我该如何设置闪烁的停止？ - HP.

在这里提出的所有解决方案中，只有这个对我起作用了。 - mknopf

Answer 3

这里有一个带有动画的闪烁：

$(".blink").animate({opacity:0},200,"linear",function(){
  $(this).animate({opacity:1},200);
});

只需给任何您想要闪烁的元素添加 blink 类：

<div class="someclass blink">some text</div>

致谢 #jquery 中的DannyZB

特点：

• 无需任何插件（除了JQuery本身）
• 已具备所需功能

- nir0

---

是的，我在发布后就发现了这个问题）不过很容易就解决了。 - nir0

这很好，没有任何插件或花哨的东西。 - Peter T.

Answer 4

如果您不想使用jQuery，这可以通过CSS3实现。

@-webkit-keyframes blink {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

blink {
  -webkit-animation-name: blink;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 1s; 
}

似乎在Chrome中可以工作，尽管我觉得我听到了微弱的哭泣声。

- Jesse Hattabaugh

Answer 5

将上述代码组合起来，我认为这是一个不错的解决方案。

function blink(selector){
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(800);
        $(this).animate({opacity:1}, 50, function(){
        blink(this);
        });
        $(this).delay(800);
    });
}

至少在我的网站上它是能够工作的。 http://140.138.168.123/2y78%202782

- Moses

---

这是一个很好的答案，因为它仍然允许用户在“关闭”周期期间单击闪烁元素，而不像使用隐藏、切换或淡化的解决方案。另请参阅上面的Hermann Ingjaldsson的答案。 - cssyphus

fadeIn() 和 fadeOut() 对你来说不够用吗？ - alex

Answer 6

这是我的代码；它让你可以控制三个重要参数：

• 淡入速度
• 淡出速度
• 重复速度

.

setInterval(function() {
    $('.blink').fadeIn(300).fadeOut(500);
}, 1000);

- yPhil

---

这里使用jQuery链式编程会非常棒。 - alex

这会使它在闪烁之间消失，从而破坏布局。 - William Entriken

@alex和Full Decent，你们都是对的 :) - yPhil

Answer 7

您也可以使用标准的CSS方法（无需JQuery插件，但兼容所有浏览器）：

// Start blinking
$(".myblink").css("text-decoration", "blink");

// Stop blinking
$(".myblink").css("text-decoration", "none");

W3C Link

- Lastnico

---

不兼容Chrome和Safari! - Lennart Koopmann

也不支持IE9。 - johndodo

Answer 8

这是最简单的方法（而且代码最少）：

setInterval(function() {
    $( ".blink" ).fadeToggle();
}, 500);

点此查看代码示例

如果你正在寻找更高级的东西...

//Blink settings
var blink = {
    obj: $(".blink"),
    timeout: 15000,
    speed: 1000
};

//Start function
blink.fn = setInterval(function () {
    blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);

//Ends blinking, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    //Ensure that the element is always visible
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);

Fiddle

- Omar

Answer 9

你也可以尝试这些方法：

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  function startBlink(){
    window.blinker = setInterval(function(){
        if(window.blink){
           $('.blink').css('color','blue');
           window.blink=false;
         }
        else{
            $('.blink').css('color','white');
            window.blink = true;
        }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
</script>

- jerjer

---

那个例子过度污染了全局命名空间。 - alex

Answer 10

$.fn.blink = function(times, duration) {
    times = times || 2;
    while (times--) {
        this.fadeTo(duration, 0).fadeTo(duration, 1);
    }
    return this;
};

- yckart

---

绝对棒！使用setInterval(function())可能会带来一些问题（冒泡、停止、保持“开启”等）。非常感谢！ - Pedro Ferreira

简单明了，直截了当。+1 - Giddy Naya