Javascript 如何在不改变背景颜色的情况下创建文本闪烁的jQuery按钮？

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

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

它可以工作，但它会淡出链接文本和链接的背景色

这是我的css：

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

如何使其仅淡入/淡出文本

---

谢谢您的帮助。

基于您的问题，我假设您在

a

元素上有背景色。因此，要解决闪烁的问题，只需将文本放在一个范围内，然后闪烁：

HTML

JS

另外，

setInterval

使用毫秒，而不是秒。因此，您应该将其更改为10000作为延迟，或者在

fadeIn

完成时调用blink方法

html

<div id=blink>How to create blinking text with jQuery?</div>

---

演示

完成后，只需再次调用动画函数，如下所示

var blink = function() {
    $('a').animate({
        opacity: '0'
    }, function(){
        $(this).animate({
            opacity: '1'
        }, blink);
    });
}

blink();

---

如果你不想背景颜色褪色，你可能需要像这样使用一些css

var blink = function() {
    $('a').animate({
        opacity: '0'
    }, function(){
        $(this).animate({
            opacity: '1'
        }, blink);
    });
}

blink();

CSS:

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

a.blink{
    color:transparent;
}

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

Javascript:

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

a.blink{
    color:transparent;
}

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

---

这一个启动闪烁而不褪色，也适用于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')

这一个启动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')

功能闪烁器（e）
{var e_id=$（e）[0].id
窗口[“闪烁计数器”+e\U id]=0
窗口[“闪烁器计数”+e\U id]=3//次闪烁
闪烁（e）
}
功能闪烁（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（））
{窗口[“闪烁计数器”+e_id]++
if（$.browser.msie）$（this.css（{'visibility'：'visible'}）
如果（窗口[“blinker\u counter\u”+e\u id]我为你做了一个，文本在ChromePost中闪烁良好，为你的
a
标记显示你的CSS。你声明它会淡出背景；如果你在
a
上有背景，它也会淡出，因为你正在淡出整个元素。90度呼叫。他们想要回他们的网页。什么（预期的）当淡出时间为5秒时，每10毫秒使用
setInterval
有什么意义？还有，为什么不使用第二次回调的递归并跳过间隔？@Connor，我会说你很幸运。谢谢，我已经遇到了另一个答案，说明了同样的问题。不过，在我的情况下，我无法更改链接的标记。因此，我无法添加任何
span
s。如果您需要，总会有JavaScript来做这件事。谢谢，但这正是我的函数所做的。它也会褪色我链接的背景色。我已经相应地更新了我的问题。这似乎最接近OP要求的+1。我恐怕不是因为背景色也会褪色：很好的紧凑解决方案。谢谢！我该怎么做顶部闪烁？
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')

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

function textblink() { $('.blink').toggle(); } setInterval(textblink, 1000);