我有一個鏈接，我希望該鏈接中包含的文本使用jQuery閃爍（連續）。如何在不改變背景顏色的情況下創建一個閃爍文本的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; 
}

我怎樣才能得到它的淡入/淡出只有文本？

感謝您的任何幫助。

來源

2013-07-28 Tintin81

我由[的jsfiddle]（http://jsfiddle.net/97R5n/）文本在Chrome中閃爍正常 –

爲您的'a'標籤發佈您的CSS。你說它淡化了背景;如果你對「a」有背景知識，它也會消失，因爲你正在淡化整個元素。 –

90號叫。他們希望回到他們的網頁。 – mishik

你只是在用它完成後，像這樣再次調用動畫功能。

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

來源

2013-07-28 17:00:25 iConnor

這似乎是最接近OP要求+1 –

恐怕不是因爲背景顏色也淡入淡出：http://jsfiddle.net/p23zn/3/ – Tintin81

更新回答.... – iConnor

根據你的問題，我假設你有a元素的背景顏色。因此，要解決這個問題，從閃爍出你可以簡單地把文本中的跨度和眨眼即：

HTML

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

CSS

a 
{ 
    background-color:green; 
}

$(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/

來源

2013-07-28 16:52:30

謝謝，我已經遇到了另一個答案陳述相同。但在我的情況下，我無法更改鏈接的標記。所以我不能添加任何'span's。 – Tintin81

@ Tintin81你可以通過JS添加標記嗎？ –

如果你需要的話，總會有JavaScript來做。 – m90

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-28 16:57:34

謝謝，但這確實是我的功能。它也會淡化我的鏈接的背景顏色。我相應地更新了我的問題。 – Tintin81

這一次發起不褪色閃爍，也適用於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-19 06:50:33 plavozont

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

來源

2015-04-08 15:14:45

如何在不改變背景顏色的情況下創建一個閃爍文本的jQuery按鈕？

回答

Demo

Demo

相關問題