CODEWITHSUNDEEP
javascriptjquery
Mohammedmehdi Khatau
Mohammedmehdi Khatau

Reputation: 43

Animating a div's apearance on mouseover in jquery

I wanted to animate a div on mouseover. I just don't know how to make it fade in/appear slowly (I think we have to use the .animate function or something like that)

$("#logo").mouseover(function() { $("#nav").css('visibility','visible'); });

Will appreciate any help :)

Upvotes: 1

Views: 104

Answers (5)

bipen
bipen

Reputation: 36531

USe fadeIn()... try this.

$("#nav").hide();
$("#logo").mouseover(function() { $("#nav").fadeIn(600));

Upvotes: 0

Sarang
Sarang

Reputation: 171

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#logo").mouseover(function() { $('div:hidden:first').fadeIn('slow', function() {
// Animation complete
alert("complete")
}); });
});

</script>
<style>
#nav{display:none}
</style>
</head>

<body>
<div id="logo">Click Me</div>
<div id="nav" style="background:#CCC">sample</div>
</body>
</html>

Upvotes: 0

Eich
Eich

Reputation: 3788

You can use the fadeIn/fadeOut methods or the fadeToggle method which automatically fades in or out. Every method allows a duration parameter to set the animation time, but there also many more parameters to modify the fading.

Look at the API for fadeToggle to see the whole functionality (and how to use) :) . (fadeIn API, fadeOut API).

Upvotes: 1

defau1t
defau1t

Reputation: 10619

$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });

Make sure your css has style for #nav as display:none;

Reference http://api.jquery.com/fadeIn/

SAMPLE DEMO

Upvotes: 3

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this:

$("#logo").mouseover(function() { 
    $("#nav").fadeIn('slow'); 
});

Refer Site http://api.jquery.com/fadeIn/

Upvotes: 1

Related Questions