Demo

Question

我有一个链接，我希望该链接中包含的文本使用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);
    });
    }
}

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

这是我的css：

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

我怎样才能让它淡出/淡出文本？

感谢您的帮助。

Answer 1

你必须在完成之后再次调用动画函数，就像这样。

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

blink();

Demo

如果你不想让背景颜色褪色，你可能需要使用这样的一点css。

<强> CSS：

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

a.blink{
    color:transparent;
}

<强>使用Javascript：

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

Demo

Answer 2

根据您的问题，我假设您在a元素上有背景色。因此，为了解决这个问题，你可以简单地将文本放在一个范围内并闪烁：

HTML

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

CSS

a 
{
    background-color:green;
}

JS

$(function () {

    blinking($(".blink"));

})($);

function blinking(elm) {
    timer = setInterval(blink, 10000);
    blink();

    function blink() {
        elm.fadeOut(5000, function () {
            elm.fadeIn(5000);
        });
    }
}

此外，setInterval使用毫秒，而不是秒。因此，您应该将其更改为10000作为延迟，或者在fadeIn完成后调用闪烁方法。

http://jsfiddle.net/97R5n/3/

Answer 3

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

Answer 4

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

demo http://jsfiddle.net/kougiland/7U3kc/

Answer 5

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

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

5 个答案:

Demo

Demo