jQuery：閃爍的文字在結束閃爍後將不可見

Question

我正在研究文字閃爍的代碼，並且注意到下面的代碼有時會根據時間的不同，使得文字在停止後保持隱藏狀態動畫：

//Blink settings 
var blink = { 
    obj: $(".blink"), 
    timeout: 15000, 
    speed: 1000 
}; 

//Start function 
blink.fn = setInterval(function() { 
    blink.obj.fadeToggle(blink.speed); 
}, blink.speed + 100); 
//End blink animation, after 'blink.timeout' millisecons 
setTimeout(function() { 
    clearInterval(blink.fn); 
    blink = null; 
}, blink.timeout); 

fiddle

我試圖clearInterval(blink.fn);但it did not work之後加入blink.obj.show()，blink.obj.css(...)等。

... 
setTimeout(function() { 
    clearInterval(blink.fn); 
    blink.obj.show(); 
    blink.obj.css("visibility","visible"); 
... 

我希望文本始終可見閃爍停止後

Answer 1

嘗試完成閃爍後blink.obj.fadeIn() ..

如果你想十個分量的速度，然後blink.obj.fadeIn(blink.speed)：

...code...code... 
//End blink animation, after 'blink.timeout' millisecons 
setTimeout(function() { 
    clearInterval(blink.fn); 
    //The solution to your problem is in the line below 
    blink.obj.fadeIn(blink.speed); 
    blink = null; 
}, blink.timeout); 
... 

這裏是jsfiddle更新：http://jsfiddle.net/jormaechea/mksh4eu3/7/

Answer 2

你的代碼就好，只是擺脫你添加的+100。去掉100試試這個，因爲它是100和15000多個低於該金額，當它到達那裏

//Blink settings 
 
var blink = { 
 
    obj: $(".blink"), 
 
    timeout: 15000, 
 
    speed: 1000 
 
}; 
 

 
//Start function 
 
blink.fn = setInterval(function() { 
 
    blink.obj.fadeToggle(blink.speed); 
 
}, blink.speed+100); 
 
//End blink animation, after 'blink.timeout' millisecons 
 
setTimeout(function() { 
 
    clearInterval(blink.fn); 
 
    blink.obj.fadeIn(blink.speed+1); 
 
    blink = null; 
 
}, blink.timeout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="blink">Flashing Text</div>

編輯2：那麼你有頂部的blink.obj.fadeToggle(blink.speed);數量通過在你的停止功能上增加至少一毫秒更多的信息blink.obj.fadeIn(blink.speed+1);