Omar Omar - 6 months ago 26
jQuery Question

jQuery: My blinking text won't be visible, after ending blinking

I was working on a text-blinking code, and noticed that this code below will sometimes, depending on the timing, make the text to remain hidden after stopping the animation:

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

I tried adding
blink.obj.show()
,
blink.obj.css(...)
etc. right after
clearInterval(blink.fn);
but it did not work.

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


I want the text to ALWAYS be visible after the blinking stops

Answer

Try blink.obj.fadeIn() after the blinking is done..

If you want to mantain the speed, then 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);
...

Here is the jsfiddle updated: http://jsfiddle.net/jormaechea/mksh4eu3/7/