Introduction
In this article i am going to explain how you can blink div tag with using jQuery. Recently i got new requirement from my client they wants to highlight spacial message/notice/updates/news/offers to end user, and client said they need provision something like in admin panel they wants two different buttons first is to blink message/notice/updates/news/offers added by client for end user from admin side and second button is for to stop blinking message/notice/updates/news/offers.
Requirement
1) Blink HTML Div Tag.
Implementation
Here we will blink HTML Div tag and to archive this requirement we will use JQuery Toggle() Method, This method is used to hide and show element within web page. JQuery Toggle() Method will check the elements that is selected for visibility and if element is then visible then hide this element and if element is hidden then that will set visible that element and this create a toggle effects.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" language="javascript"></script>
<script language="javascript"> $(document).ready(function () { var blink = null; $("#btntoggle").on("click", function () { if (blink == null) blink = setInterval(blinkMessage, 500); }); $("#btnstoptoggle").on("click", function () { if (blink != null) { clearInterval(blink); blink = null; $(".divmsg").removeClass("divred"); } }); }); function blinkMessage() { $(".divmsg").toggleClass("divred"); } </script>
HTML Markup
<!DOCTYPE html> <html> <head> <title>JQuery Blinking Example</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js" language="javascript"></script> <meta charset="utf-8" /> <style type="text/css"> .divmsg { background: #ff0097; color: #fff; display: inline-block; margin: 20px 10px 20px 10px; padding: 20px; border-radius: 5px; width: 30%; font-family: Verdana; font-weight: bold; } .divred { background: #223c88 !important; } .btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; margin: 0 0 0 10px; } /* Green */ .success { border-color: #ff0097; color: #223c88; } .success:hover { background-color: #ff0097; color: white; } /* Blue */ .info { border-color: #223c88; color: #ff0097; } .info:hover { background: #223c88; color: white; } </style> </head> <body> <div class="divmsg"> Hi...! Codingvila, This is Nikunj Satasiya </div><br /> <input type="button" id="btntoggle" class="btn success" value="Start Blinking" /> <input type="button" id="btnstoptoggle" class="btn info" value="Stop Blinking" /> <script language="javascript"> $(document).ready(function () { var blink = null; $("#btntoggle").on("click", function () { if (blink == null) blink = setInterval(blinkMessage, 500); }); $("#btnstoptoggle").on("click", function () { if (blink != null) { clearInterval(blink); blink = null; $(".divmsg").removeClass("divred"); } }); }); function blinkMessage() { $(".divmsg").toggleClass("divred"); } </script> </body> </html>
Output/Demo
Summary
This article explains how you can blink html div tag using jquery toggleClass and also start and stop blinking using javascript setInterval and clearInterval function.