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

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

'append' & 'fade out/in' on mouse hover
Posted on: August 2, 2010 at 12:00 AM

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

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

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics