当前位置:  开发笔记 > 编程语言 > 正文

文字闪烁jQuery

如何解决《文字闪烁jQuery》经验,为你挑选了9个好方法。

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



1> alex..:

一个插件闪烁一些文字听起来有点像矫枉过正......

试试这个...

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


亚历克斯,感谢您将眨眼标签带入21世纪,我所有的90年代模仿网站都从他们丑陋的小心灵的底部感谢你:)
你会如何使用它(在代码中)? - 对不起,这可能是一个愚蠢的问题.
@TheSteven在这个例子中,任何具有"blink"类的元素都会应用它.所以你有一些像` Blinky Bill `之类的东西,然后在DOM准备好或类似之后,运行这个代码.

2> barkmadley..:

尝试使用这个blink插件

例如

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

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


这比它的价值更多的努力不是吗?

3> nir0..:

这里有动画闪烁:

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

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


所有关于#jquery的DannyZB问候

特征:

不需要任何插件(但JQuery本身)

做的事情


你可以使用`fadeIn()`和`fadeOut()`,对吧?
这只闪烁一次

4> Jesse Hattab..:

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



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



6> yPhil..:

这是我的; 它可以控制重要的3个参数:

速度的消退

淡出速度

重复速度

.

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



7> jerjer..:

你也可以试试这些:

some text are blinking


该示例不必要地污染全局命名空间.

8> Lastnico..:

您也可以使用标准的CSS方式(不需要JQuery插件,但与所有浏览器兼容):

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

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

W3C链接


与Chrome和Safari不兼容!

9> Omar..:

这是最简便的方法(并且使用最少的编码):

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);

小提琴

推荐阅读
大大炮
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有