Share on Google+Share on Google+

'append' & 'fade out/in' on mouse hover

Advertisement
In this tutorial, we will discuss about how to apply 'append' & 'fade out/in' on mouse hover using jQuery.

'append' & 'fade out/in' on mouse hover

In this tutorial, we will discuss about how to apply 'append' & 'fade out/in' on mouse hover using jQuery. In this Example, a list is given , if we hover on first two element, "<<<" is appended on it, to show mouse pointing. If we hover on last two elements ,"<<<" is appended on it & it will fade out/in to show mouse pointing. The fadeout is set to100 millisecond  & fadein is set to 500 milliseconds.

hoverMouseEventList.html

<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="jquery-1.4.2.js"></script>

</head>
<h3><font color="red">Hover on any element to see effect</font></h3>
<body>
<ul>
<li>Cake</li>
<li>Pastries</li>
<li class='fade'>Patties</li>
<li class='fade'>Noodles</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span><<< </span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>
</body>
</html>

OUTPUT

When we hover on second element of the list :

When we hover on last two elements ., it will fade in/out + append string "<<<" :

Download Source Code

Click here to see demo

Advertisements

Posted on: August 2, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.