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 に答える
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 に答える