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>
<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