jQuery: I am struggling to make my blinking text visible once the blinking animation has ended

Question

jQuery: I am struggling to make my blinking text visible once the blinking animation has ended

While working on a text-blinking code, I discovered that under certain timing conditions, the following code can cause the text to remain hidden even after the animation has stopped:

//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' milliseconds
setTimeout(function () {
    clearInterval(blink.fn);
    blink = null;
}, blink.timeout);

View fiddle here

Attempts were made to resolve this issue by adding blink.obj.show(), blink.obj.css(...) etc. immediately after clearInterval(blink.fn);, however, it was not successful.

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

My goal is to ensure that the text is ALWAYS visible once the blinking stops

javascript jquery css

Answer 1

Answer №1

After the blink effect is finished, try using blink.obj.fadeIn().

If you want to maintain the same speed, use blink.obj.fadeIn(blink.speed):

...custom code...
//Stop blinking animation after 'blink.timeout' milliseconds
setTimeout(function () {
    clearInterval(blink.fn);
    //To solve your issue, add the line below
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);
...

To see the updated jsfiddle, click here: http://jsfiddle.net/jormaechea/mksh4eu3/7/

Answer 2

After the blink effect is finished, try using blink.obj.fadeIn().

If you want to maintain the same speed, use blink.obj.fadeIn(blink.speed):

...custom code...
//Stop blinking animation after 'blink.timeout' milliseconds
setTimeout(function () {
    clearInterval(blink.fn);
    //To solve your issue, add the line below
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);
...

To see the updated jsfiddle, click here: http://jsfiddle.net/jormaechea/mksh4eu3/7/

Answer 3

Answer №2

Your code looks good, but you should remove the +100 that was added. Instead, try tweaking the timing slightly without adding 100, as 15000 is already less than that amount when it reaches there.

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

EDIT 2: To make sure everything works smoothly, consider adjusting the timing by just one millisecond in both

blink.obj.fadeToggle(blink.speed);

and blink.obj.fadeIn(blink.speed+1); within your stop function.

Answer 4

Your code looks good, but you should remove the +100 that was added. Instead, try tweaking the timing slightly without adding 100, as 15000 is already less than that amount when it reaches there.

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

EDIT 2: To make sure everything works smoothly, consider adjusting the timing by just one millisecond in both

blink.obj.fadeToggle(blink.speed);

and blink.obj.fadeIn(blink.speed+1); within your stop function.

jQuery: I am struggling to make my blinking text visible once the blinking animation has ended

Answer №1

Answer №2

Similar questions

Improved AJAX Dependency

Vuetify Autocomplete that allows for adding values not in the predefined list

Accessing factory in controller using AngularJS

Inject parameters into the templateUrl property of an Angular component

Converting JavaScript table input values to JSON format

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

Error Handling with Node.js Sequelize RangeError

Tips for detecting if text appears in bold on a webpage using Selenium

The fluid jumbotron in react-bootstrap is not extending to the entire width of the webpage

Ensure one div scrolls independently while the other remains fixed using Bootstrap

Showing content based on the current date using Javascript

Performing a fetch() POST request in Express.js results in an empty body object being generated

Choose the present date as the default in the Bootstrap calendar

Dynamic RSS Aggregator

I created a custom discord.js-commando command to announce all the channels that my bot is currently active in, however, encountered an unexpected error

Using Vue to input an array

Google information window: clicking a link will trigger a page refresh

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

Tips for positioning a box on top of a map in a floating manner

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response