What is the solution to fixing a flashing div?

I've been using a jQuery method to make my div blink. Check it out:

JSFIDDLE

<div class="blink">blinking text</div>non-blinking
<div class="blink">more blinking text</div>
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('.blink');

Now, the question is how do we make it stop blinking after 5 times?

Answer №1

You don't need Javascript to accomplish this - CSS can do the trick:

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.blink {
    -webkit-animation: blinker 1s 5;
    -moz-animation: blinker 1s 5;
    animation: blinker 1s 5;
}

Check out this updated fiddle

Be sure to pay attention to the 5 value, as it represents the animation-iteration-count, adjust as needed.

Answer №2

Check out the solution presented below:

Give it a shot

let counter = 0;

function blinkElement(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
            counter++ < 8 && blinkElement(this);
        });

    });
}

blinkElement('.blink');

Here is a live demonstration: Interactive Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I implement changing the page background color based on different routes in ReactJS and React Router?

Is there a way to change the background color of the browser when navigating to a new route in ReactJS and React Router? Check out my tips below that I discovered during my experimentation: I have managed to implement this on individual page views using & ...

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

Choosing options from Bootstrap dropdown using Protractor

I am working with a Bootstrap single-button dropdown and I need to programmatically click on one of the options in the dropdown using Protractor. How can I achieve this? <div class="btn-group" ng-if="!persist.edit" dropdown> ...

Issue with Ajax load function not functioning properly on Internet Explorer 8

My ajax load function is working in Chrome, Safari, Opera, and Firefox but it's not working in Internet Explorer 8. (using jQuery version "jquery-1.11.2") This is my JavaScript code: function solFrame(islem, sayfa) { if (sayfa == '') { ...

I am looking to showcase the JSON output on a ReactJS interface

Here is the output of my JSON data I am using the Map function in ReactJS to display elements from a JSON array. I have attempted the code below and encountered an error stating "Cannot read property '_currentElement' of null." Can someone pleas ...

navigation panel including menu items and company logo positioned to the left side

My webpage contains the following code: <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; "> <div class="container-fluid"> < ...

Vue Component Update DisorderI hope this meets your expectations

Below is my code using Bootstrap, Vue, and Axios: SETUP: *Please disregard the tab-contents in component_a main.js Vue.component('component_a', { props: ['info'], template: `<div> // Component A template code here } ...

Tips for updating the selected date format in a Material Table component using React

In the context of using a material table in React, the columns set up are as follows: columns={[ { title: 'Name', field: 'name', type: 'string', }, ...

Ways to eliminate the unusual dashed space in ReactJS using Bootstrap

While developing an app with NextJS and Bootstrap, I noticed a strange dashed gap at the top of the screen in the elements tab. Despite checking for margin or padding-top properties on any element, there doesn't seem to be a clear cause for this issue ...

Can anyone point me to the Angular-2-Release that is located on the https://code.angularjs.org

Word has it that angular 2 has finally made its debut. Personally, I'm not a big fan of relying on npm and bower to automatically load my components. I prefer to keep my dependencies minimal and fully understand each one. Additionally, I like to utili ...

Problem encountered in AngularJS CheckBox binding where the checkbox remains unchecked despite the model having a checked value

I am working with AngularJS and have implemented the following code: <div > <input type="checkbox" ng-model="vehicleDetails.selfOwned"> Owned </div> <div> {{vehicleDetails.selfOwned}} </div> The mo ...

Converting dates in Javascript

I have retrieved a date/time value of "20131218" from an API response. My goal is to transform this date into the format "2013-12-18". In PHP, this can be easily achieved with the following code: echo date("Y-m-d", strtotime('20131218')); The ...

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

The code snippet I have is as follows. HTML <div ng-repeat="item in canvasElements" id="declareContainer"> {{item}} </div> Javascript (Angular) (function(){ //angular module var dataElements = angular.module('dataElements' ...

Unable to show input in Javascript HTML

Every time I try to run this code on my webpage, the buttons do not seem to respond when clicked. I am aiming to have the user input for full name, date of birth, and gender displayed in the text box when the display button is clicked. When the next butt ...

The jQuery Animate feature springs to life with just a single click

I'm attempting to integrate jQuery's animate feature with a bookmark ID on my website. When I first click on the link, it jumps to the bookmark ID without any animation, but if I click the same link again, the animation works as expected. var Ti ...

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

Using Javascript to remove spans that do not have an id assigned

Is there a way to identify and remove spans without ids from a string? I have a text with several spans, some with ids and some without. Input: <span>Hi there!</span><span id="blabla">This is a test</span> Output: Hi there!< ...

Developing an Addon for Firefox using XUL and JavaScript

I am interested in creating a Firefox Addon that dynamically generates a button in the webpage's DOM when a specific page like www.google.com is loaded. This button, when clicked, will redirect to another page such as www.stackoverflow.com. It is imp ...

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...