Header menu

_________________________________________________________________________________

Monday 3 March 2014

Highlight/Blink effect using jquery



We often use blink in html to get users attention but it makes our info unreadable and irritating. So today i am sharing a small jquery code which will produce same effect. And can be easily edit according to need.


 function blink(){
      $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
      }
 self.setInterval(function(){blink()},1000);

This is small code which can do the whole thing work. Self.setInterval() is function which will call itself after 1 sec and call blink function. 

For more details run the below example : 



<html>
<head>
    <style>
        body{
            text-align: center;
        }
        input{
            margin-top:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
        #box{
            margin:50px auto;
            width:500px;
            height:100px;
            color:#fff;
            padding:10px;
            background: orange;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function() {          
              function blink(){
                $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
                }
                self.setInterval(function(){blink()},500);
        });
    </script>
</body>
</html>

No comments:

Post a Comment