文本闪烁 jQuery

IT技术 javascript jquery html css
2021-01-14 17:57:09

什么是在 jQuery 中使文本闪烁的简单方法以及阻止它的方法?必须适用于 IE、FF 和 Chrome。谢谢

6个回答

一个闪烁一些文本的插件对我来说听起来有点矫枉过正......

试试这个...

$('.blink').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 500);
});
你将如何使用它(在代码中)?- 对不起,这可能是一个愚蠢的问题。
2021-03-29 17:57:09
亚历克斯,感谢您将眨眼标签带入 21 世纪,我所有 90 年代的模仿网站都发自内心地感谢您:)
2021-04-10 17:57:09
@TheSteven 在此示例中,任何具有 类的元素都blink将应用 this 。所以你会有类似的东西<span class="blink">Blinky Bill</span>,然后在 DOM 准备好或类似的东西之后,运行这段代码。
2021-04-12 17:57:09
@alex,我可以请您在这里查看一个关于不同主题的 jquery 问题:stackoverflow.com/questions/13137404/...
2021-04-13 17:57:09

尝试使用这个闪烁插件

例如

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

它也是一个非常简单的插件,您可以扩展它以停止动画并按需启动它。

barkmadley,我如何设置停止闪烁?
2021-03-15 17:57:09
在这里提出的所有解决方案中,这是唯一对我有用的解决方案
2021-03-19 17:57:09
这比它的value更多的努力不是吗?
2021-03-24 17:57:09
我会使用blink-tag,并用jQuery 检查浏览器是否是IE,如果不是用这个插件闪烁。
2021-04-11 17:57:09

这是闪烁的动画:

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

只要你想眨眼就给一个眨眼课:

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

所有关于#jquery 的 DannyZB 的问候

特征:

  • 不需要任何插件(但 JQuery 本身)
  • 做这件事
这很好,没有任何插件或花哨的东西
2021-03-21 17:57:09
是的,我在发布后发现了这一点)虽然很容易修复
2021-04-05 17:57:09

如果您不想使用 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 中工作,虽然我以为我听到了轻微的抽泣声。

结合上面的代码,我认为这是一个很好的解决方案。

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

fadeIn()fadeOut()没有为你做了吗?
2021-03-19 17:57:09
这是一个很好的答案,因为它仍然允许用户在“关闭”周期期间单击闪烁的元素,这与使用隐藏、切换或淡入淡出的解决方案不同。另请参阅上文 Hermann Ingjaldsson 的回答。
2021-03-22 17:57:09