jQuery blink animation tutorial

A short tutorial on how you can make a blink animation using jQuery

Posted on May 10, 2021


When you want to add a blinking animation to an element in your web page, you can use the jQuery fading effects in combination with the JavaScript setInterval() method so that the element will blink once every one or two seconds.

Here’s an example code to do so:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>jQuery blink animation</h1>
  <p class="blink">This paragraph will blink</p>
  <script>
    function fnBlink() {
      $(".blink").fadeOut(1000);
      $(".blink").fadeIn(1000);
    }
    setInterval(fnBlink, 2000);
  </script>
</body>

Once the HTML document is loaded, the setInterval() method will call the fnBlink() function every 2 seconds (2000ms). The fnBlink() function will then grab the element you want to animate using jQuery $ selector and animate the element using fadeOut() method.

The fadeOut() will slowly turn the element invisible by the amount of time you passed as its parameter. The time to fade the element is calculated in milliseconds.

The fadeIn() method will reverse the fadeOut() effect by slowly turning the element visible.

And that’s how you can add blinking animation to HTML elements using jQuery 😉

Level up your programming skills

I'm sending out an email once every Wednesday with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.