Hover to fade in and out in jQuery

Description

The following code shows how to hover to fade in and out.

Example


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--  ww  w .ja  v  a2s. c o m-->
$("div").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
});
</script>
</head>
<body>
<div><h1>java2s.c o m</h1></div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Hover to fade in and out in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Event

...
Cancel jQuery event in jQuery
Change style for mouse over event in jQuery
Change the font weight and color of all Ita...
Convert key code to char in keypress event ...
Execute an event only once in jQuery
Fire focus event and add style to the nearb...
Get event in page in jQuery
Get event target and work on it in jQuery
Get the event location in jQuery
Get the keycode from event from keydown eve...
Handle a click event and displays the tag n...
Handle anchor click event in jQuery
Handle click event once in jQuery
Handle click event to links in unordered li...
Handle form select change event in jQuery
Handle input text element key type event in...
Handle the first time click event on div ta...
Handler div element mouse hover event in jQ...

Hover to fade in and out in jQuery

Hover to hide tag in jQuery
Listen to keydown event in jQuery
Listen to keyup event for input element in ...
Listen to load event in jQuery
Listen to mouse down event in jQuery
Listen to mouse enter event in jQuery
Listen to mouse leave event in jQuery
Listen to mouse out event in jQuery
Listen to mouse over event in jQuery
Listen to mouse up event in jQuery
Listen to scroll event in jQuery
Listen to the escape key in jQuery
Listen to the unload event in jQuery
Remove click event from div tag in jQuery
Return false to cancel event and prevent it...
Set focus for an input text element in jQue...
Set focus to text box in jQuery
Set value in case of focus event in jQuery
Show the typed value for keyup event in jQu...
...