Blink effect on mouse move over is like a dazzling light show. When we move mouse in this box, over cursor path will be faded out (hides in particular interval) and show(fadein). Demo for blink effect using jquery is below here, just click on this link
stylesheet
[code type=css]
<style type=”text/css”>
body
{
background-color: #E0E0E0;
}
li
{
font-size: 48px;
text-align: center;
float: left;
margin: 1px;
display: block;
width: 50px;
height: 50px;
background-color: white;
cursor: pointer;
}
[/code]
jQuery
jquery finction is important in this concept,
$(“li”).hover(function() { – this function will be triggered, when we move mouse over “li” and call fadeout, fadein function
$(this).fadeOut(’50’); – hides the particular li
$(this).fadeIn(); – reappears the li
[code type=html]
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“li”).hover(function() {
$(this).fadeOut(’50’);
$(this).fadeIn();
});
});
</script>
[/code]
HTML, jQuery
[code type=html]
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“li”).hover(function() {
/*$(this).addClass(‘board’);*/
$(this).fadeOut(’50’);
$(this).fadeIn();
});
});
</script>
</head>
<body style=”margin:0 auto; width:800px;”>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>
[/code]