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

Ads