如何在不更改背景颜色的情况下创建带有闪烁文本的jQuery按钮? [英] How to create a jQuery button with blinking text without changing the background colour?

问题描述

我有一个链接，我希望该链接中包含的文本使用jQuery闪烁(连续).

I have a link and I would like the text contained in that link to blink (continuously) using jQuery.

<a href="#" class="blink">Button</a>

这就是我所拥有的:

$(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 and the link's background colour.

这是我的CSS:

.blink {
  color: white;
  background-color: green;
}

我怎样才能使其仅淡入/淡出文本?

How can I get it to fade in/out the text only?

感谢您的帮助.

推荐答案

您只需在动画函数完成后再次调用它，就像这样.

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

演示

---

如果您不希望背景颜色褪色，则可能需要使用一些CSS.

Demo

---

If you don't want the background color to fade you may have to use a bit of css like this.

CSS:

a{
    transition: color 200ms ease;
    background:skyblue;
}

a.blink{
    color:transparent;
}

Javascript:

window.setInterval(function(){
    $('a').toggleClass('blink');
}, 500);

这篇关于如何在不更改背景颜色的情况下创建带有闪烁文本的jQuery按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！