animate div background image

Question

i have div

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

in this div i have complete body of page.

i have also 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="" border="0">
 </div>

what i need is when mouse come over DIV mover first div(MDive) class changes to hide2 with animate effect.

or

first DIV MDive background image change to Second Image with Animate Effect

Answer 1

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