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 😉
