Blink div background using jQuery toggleClass

This example shows you how to blink div background using jQuery toggleClass and javascript setInterval.

jQuery toggleClass() example!



Source code:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> .divmsg { background: green; color: #fff; display: inline-block; margin: 20px; padding: 20px; border-radius:5px; } .divred { background: red !important; } #btntoggle, #btnstoptoggle { margin: 10px 20px; padding:10px; } </style> </head> <body> <div class="divmsg"> jQuery toggleClass() example! </div><br /> <input type="button" id="btntoggle" value="Blink background using toogle" /><br /> <input type="button" id="btnstoptoggle" value="Stop blinking" /> <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> </body> </html>