Question

我正在尝试慢慢改变bg图像来进行悬停动作。

.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');

现在我正在尝试为selector $（'＃head_menu a'）编写hover-action。我可以慢慢地将bg-image更改为需要吗？

这是我的尝试代码：

    $("#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，只需使用背景位置。

从div标记中删除a（div是块元素，a是内联...反之亦然）。

现在，如果我们只有一张图片，请使用animate jQuery函数当然（backgroundPosition）。看一下很好的例子，对于begginer来说非常有用的网站：http://visualjquery.com/ （点击：Effects -> Custom -> Animate）

Answer 2

我认为您可以使用jquery animate函数执行此操作，并对CSS进行一些细微更改 - 例如：

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

然后：

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

});

目前无法测试，对不起 - 但是你得到了基本的想法。

JQuery - 慢慢改变bg图像

2 个答案: