JQuery - slowly bg-image changing

Question

Hello, I'm trying to make my hover-action with slowly bg-image changing.

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu.png);
    float:left;
    padding: 2px 10px;
}

.menu_part:hover
{
    background-image: url(../images/bg_menu_hove.png);                            
    color: #FFF;
}

Menu:

<div id="head_menu">
    <a href="#order"><div>make order</div></a>
    <a href="#portfolio"><div>portfolie</div></a>
    <a href="#contacts"><div>contacts</div></a>
    <a href="#vacancies"><div>vacancies</div></a>
    <a href="#about"><div>about company</div></a>
</div>

Some JQuery:

$('#head_menu a').addClass('menu_part');

Now I'm trying to write hover-action for selector $('#head_menu a'). Could i change bg-image to need, when hover, slowly?

---

Here is my trying-code:

    $("#head_menu a").hover(
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000);
        },
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);                
        }
    );

But it even doesn't show menu now. What i did wrong? And I'll also try to use bg-position.

---

Here is code with bg-position, I can't understand. I merged bg_menu.png and bg_menu_hove.png into 1 image 200px+200px. Style above doesn't work even without JQuery.

.menu_part:hover
{
    background-image: url(../images/new_menu.png);
    background-position: 0 -200px;
}

Answer 1

I think you might be able do this with the jquery animate function, and some slight changes to the CSS - something like:

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu_hove.png);
    float:left;
    padding: 2px 10px;
}

.menu_part div
{
    background-image: url(../images/bg_menu.png);                            
    color: #FFF;
}

And then:

$('#head_menu a').addClass('menu_part');

$('.menu_part').bind('mouseover', function() {

    $(this).find('div').animate({ 
        opacity: 0
      }, 1500 );

});

$('.menu_part').bind('mouseout', function() {

    $(this).find('div').animate({ 
        opacity: 1
      }, 1500 );

});

Couldn't test it at the moment, sorry - but you get the basic idea.

Answer 2

First of all, standard technics for hover effects with changing background is merge both of pictures. So, stick bg_menu_hove.png to bg_menu.png after that, just play with position of background.

Remove div from a tag (div is block element and a is inline... it could be vice versa).

Now if we have only one image, use for example animate function from jQuery of course (backgroundPosition). Take a look on nice example, and really useful site for begginer: http://visualjquery.com/ (click: Effects -> Custom -> Animate)