2

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

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

谢谢你的帮助。

4

5 回答 5

7

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

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

blink();

演示

如果您不希望背景颜色褪色，则可能必须使用一些像这样的 css。

CSS：

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

a.blink{
    color:transparent;
}

Javascript：

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

演示

于 2013-07-28T17:00:25.677 回答
1 
function textblink() { $('.blink').toggle(); } setInterval(textblink, 1000);
于 2015-04-08T15:14:45.340 回答
1

根据您的问题，我假设您在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完成后调用 blink 方法。

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

于 2013-07-28T16:52:30.087 回答
0

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

演示http://jsfiddle.net/kougiland/7U3kc/

于 2013-07-28T16:57:34.633 回答
0

这个启动闪烁不褪色，也适用于 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')
于 2014-03-19T06:50:33.493 回答