Menu ▼



Posted By :
avatarmrkraju
Total Views : 332

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>






comments powered by Disqus


Search dotnetlearners.com