Using jQuery to show and hide divs

Using jQuery to show and hide divs

I'm very new to jQuery and have been studying it for about a week now. It's much more complicated than PHP (at least I think so :-P) and I'm having trouble learning how to put together events. Hopefully if I can describe it I can get some help.

Here's what I have:

I have 2 divs...div A and div B. div A sits on top and div B on bottom. When the page loads, I want div B to be hidden. I also want to opacity of div A to be set to zero. I want div B to stay hidden until someone hovers over div A. When someone hovers over div A, I want div B to fade in slowly and have full opacity. When someone leaves the hover, I want div B to fade back into div A, div A be set to 0 opacity again and div B be hidden again.

I think this might be to ambitious for a week old jQuery novice, but it's exactly what I want to do with jQuery.

Is this too steep of a task? Would it take too much code? I wouldn't know. I've tried separate hide, show and animate functions..but for some reason div B always ends up hidden when I hover over div A, and then when I get off the hover, div B becomes unhidden.

So confusing and frustrating!