JQuery - 背景图像缓慢变化

Question

我正在尝试通过缓慢的背景图像变化来进行悬停操作。

.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;
}

菜单:

<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>

一些 JQuery:

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

现在我正在尝试为选择器 $('#head_menu a') 编写悬停操作。我可以将背景图像更改为悬停时缓慢需要的吗？

<小时/>

这是我的尝试代码:

    $("#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);                
        }
    );

但现在它甚至不显示菜单。我做错了什么？我也会尝试使用 bg-position。

<小时/>

这是带有 bg-position 的代码，我无法理解。我将 bg_menu.png 和 bg_menu_hove.png 合并为 1 张 200px+200px 的图像。即使没有 JQuery，上面的样式也不起作用。

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

Answer 1

首先，背景变化的悬停效果的标准技术是合并两张图片。因此，将 bg_menu_hove.png 粘贴到 bg_menu.png 之后，只需调整背景位置即可。

从 a 标签中删除 div(div 是 block 元素，a 是内联元素……反之亦然)。

现在，如果我们只有一张图像，当然可以使用 jQuery 中的 animate 函数 (backgroundPosition)。看一下很好的例子，对初学者来说非常有用的网站:http://visualjquery.com/(点击:效果 -> 自定义 -> 动画)