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

 
 

Share on Google+Share on Google+
'append' & 'fade out/in' on mouse hover
Posted on: August 2, 2010 at 12:00 AM
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

Advertisement

Related Tags for 'append' & 'fade out/in' on mouse hover:


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.

Posted on: August 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com