javascript 如何在不更改背景颜色的情况下创建带有闪烁文本的 jQuery 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17910475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a jQuery button with blinking text without changing the background colour?
提问by Tintin81
I have a link and I would like the text contained in that link to blink (continuously) using jQuery.
我有一个链接，我希望该链接中包含的文本使用 jQuery 闪烁（连续）。
<a href="#" class="blink">Button</a>
This is what I've got:
这就是我所拥有的：
$(function() {
blinking($(".blink"));
});
function blinking(elm) {
timer = setInterval(blink, 10000);
function blink() {
elm.fadeOut(5000, function() {
elm.fadeIn(5000);
});
}
}
It works but it fades out both the link text andthe link's background colour.
它可以工作，但它会淡出链接文本和链接的背景颜色。
This is my css:
这是我的CSS：
.blink {
color: white;
background-color: green;
}
How can I get it to fade in/out the text only?
如何让它仅淡入/淡出文本？
Thanks for any help.
谢谢你的帮助。
回答by iConnor
You just have to call the animated function again after it has completed, like this.
您只需要在完成后再次调用动画函数，就像这样。
var blink = function() {
$('a').animate({
opacity: '0'
}, function(){
$(this).animate({
opacity: '1'
}, blink);
});
}
blink();
Demo
演示
If you don't want the background color to fade you may have to use a bit of css like this.
如果您不希望背景颜色褪色，则可能需要使用一些像这样的 css。
CSS:
CSS：
a{
transition: color 200ms ease;
background:skyblue;
}
a.blink{
color:transparent;
}
Javascript:
Javascript：
window.setInterval(function(){
$('a').toggleClass('blink');
}, 500);
Demo
演示
回答by John Koerner
Based on your question, I am assuming you have a background color on the aelement. So to fix that from blinking out you can simply put the text in a span and blink that:
根据您的问题，我假设您在a元素上有背景颜色。所以要解决这个问题，你可以简单地将文本放在一个跨度中并闪烁：
HTML
HTML
<a href="#"><span class="blink">Button</span></a>
CSS
CSS
a
{
background-color:green;
}
JS
JS
$(function () {
blinking($(".blink"));
})($);
function blinking(elm) {
timer = setInterval(blink, 10000);
blink();
function blink() {
elm.fadeOut(5000, function () {
elm.fadeIn(5000);
});
}
}
Also, setIntervaluses milliseconds, not seconds. So you should either change that to be 10000 as your delay or just call the blink method when the fadeInis done.
此外，setInterval使用毫秒，而不是秒。因此，您应该将其更改为 10000 作为延迟，或者在完成后调用blink 方法fadeIn。
回答by Teoman Diler
function textblink() { $('.blink').toggle(); } setInterval(textblink, 1000);
回答by Gildas.Tambo
html
html
<div id=blink>How to create blinking text with jQuery?</div>
jquery
查询
function blink(e){
$(e).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('#blink');
回答by plavozont
This one initiate blinking without fading and also works on IE
这个启动闪烁而不褪色，也适用于 IE
function blinker(e)
{ $(e).delay( 250 ).fadeTo(0, 0, function()
{ if ($.browser.msie) $(this).css({'visibility':'hidden'})
$(this).delay( 250 ).fadeTo(0, 1, function()
{ if ($.browser.msie) $(this).css({'visibility':'visible'})
blinker(this);
});
});
}
blinker('#blinker')
This one initiate 3 blinks, it can be used on multiple elements simultaneously without conflicts
这个一次启动3次闪烁，可以同时在多个元素上使用而不会发生冲突
function blinker(e)
{ var e_id=$(e)[0].id
window["blinker_counter_"+e_id]=0
window["blinker_count_"+e_id]=3 //Times to blink
blink(e)
}
function blink(e)
{ var e_id=$(e)[0].id
$(e).delay( 250 ).fadeTo(0, 0, function()
{ if ($.browser.msie) $(this).css({'visibility':'hidden'})
$(this).delay( 250 ).fadeTo(0, 1, function()
{ window["blinker_counter_"+e_id]++
if ($.browser.msie) $(this).css({'visibility':'visible'})
if (window["blinker_counter_"+e_id]<window["blinker_count_"+e_id])
{ blink(this);
} else
{ window["blinker_counter_"+e_id]=undefined
window["blinker_count_"+e_id]=undefined
}
});
});
}
blinker('#blinker')
