animate div background image

I have a <div>:

<div class="hide1" id="MDive">
    <TABLE WIDTH="1000" BORDER=0 CELLPADDING=0 CELLSPACING=0>

In this <div> I have the complete body of the page.

I also have two classes:

<style>
    .hide1 {
        background: url(bgs/bg_first.png) no-repeat;
    }
    .hide2 {
        background: url(bgs/Picture-12_SOFT.jpg) no-repeat;
    }
</style>    

I have one image in the body:

<div class="mover">
    <IMG SRC="images/buttons_full_03.png" WIDTH=129 HEIGHT=30 ALT="" bord开发者_运维知识库er="0">
</div>

What I need is: when the cursor comes over the div.mover, div#MDive's class changes to hide2 with an animation.

i.e.: div#MDive's background image changes to the second image with an animation effect

You need to look at the the JQUery.Hover event

http://docs.jquery.com/Events/hover

And then your animate event,

http://docs.jquery.com/API/1.3/Effects

Another top: look into Opacity when changing the background image.

Pino