image rollover effect in jquery?

Question

here my code-

$('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        });

html code-

<div class="smenu">
                <ul>
                  <li ><a href="images/hosp.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li>
                  <li ><a href="images/edu.jpg"><img  src="images/menu_edu.jpg" border="0"></a></li>
                  <li ><a href="images/enter.jpg"><img  src="images/menu_enter.jpg" border="0"></a></li>
                  <li ><a href="images/retail.jpg"><img  src="images/menu_retail.jpg" border="0"></a></li>                    
                </ul>
              </div>

this is workin fine but how can I set some rollover effects during the image change because now its just change the backgroun image with a flash on mouse over, I want some fade-in fade-out or something else...

Answer 1

I've had a problem like this before. You'll need to take the currently displayed image and put that into the background. Then inject a img tag over the background (hidden), load the next image into the image tag, then fade it in. This should give you a fairly simple transition to work with.

From there you could look at sliding in the image for something more fancy.