rollover effect using Jquery

Question

Would you please help me in making a rollover effect using jquery, what i want to do is when someone hover over any of the menu items the text slide down and disappear and a picture slides from the top down to the center (e.g. you could see this effect here panda as you can see the picture slide down from the top but the text does not slide down which is not what want).

I know it can be easily done using flash but i don't want my menu in flash as that would be a bad practice.

can you tell me what do i need to change in my menu HTML and what jquery functions should i use.

Thanks So much for your help

P.S. this my menu HTML and you can see my menu here menu

<ul class="nav">

<li class="active first"><a href="#" class="home">Home</a></li>
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="offers">Special offers</a></li>
<li><a href="#" class="private">Private label</a></li>
<li><a href="#" class="locations">Locations</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="jobs">Jobs</a></li>
<li><a href="#" class="contact">Contact us</a></li>
<li><a href="#" class="mm">Multimedia</a></li>

</ul>

Answer 1

Instead of doing it for you, I'll offer some places to start looking..

Here is an example that could be easily modified to use 'rollover' instead of 'click': http://css-tricks.com/examples/MenuFader/

Details on how the above example was put together (the tutorial): http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

I found this tutorial by searching on Google for "jquery effects examples": http://www.google.com/search?hl=en&q=jquery+effects+examples&btnG=Google+Search&aq=f&oq= and clicking on the first and second links.

Good luck with your Jquery project.

Answer 2

You might also find some useful resources here.

Answer 3

First things first, you'll really want to give your independent anchor tags ids, as it will make accomplishing what you're wanting much easier.

Look at the slideDown(), and slideToggle() functions, and it would basically require you setting up hidden divs and then on the mouseover event, you would slidetoggle your text out and the hidden image div in, and on mouseout do the opposite.

Good luck, jQuery is a lot of fun to work with. Play with it and see what you can blow up!