.hover() function works but image flickers multiple times
<!doctype html>
<html>
<head>
<script>
$(document).ready(function()
{
//preload images
var nNormal = $("img").attr("src");
var nHover = new Image();
//attach hover event
$("img").hover(
function()
{
$(this).attr("src", nHover);
},
function()
{
$(this).attr("src", nNormal);
}
);
});
</script>
</head>
<body>
<div>
<img src="
http://i.stack.imgur.com/ptXOs.jpg">
</div>
</body>
</html>
Why does the buttons flicker multiple times on hover? I'm pretty sure my code is correct.
Tks!