2

我正在尝试通过缓慢的 bg-image 变化来进行悬停动作。

.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') 编写悬停动作。我可以将 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.pngbg_menu_hove.png合并为 1 张 200px+200px 的图像。即使没有 JQuery,上面的样式也不起作用。

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

2 回答 2

3

首先,具有变化背景的悬停效果的标准技术是合并两张图片。所以,坚持bg_menu_hove.pngbg_menu.png那之后,只是玩背景的位置。

div从标签中删除a(div 是块元素,a 是内联的......反之亦然)。

现在,如果我们只有一张图像,当然可以使用 ( ) 中的示例animate函数。看看很好的例子,对初学者来说非常有用的网站:http: //visualjquery.com/ (点击:)jQuerybackgroundPositionEffects -> Custom -> Animate

于 2009-10-02T16:23:31.233 回答
1

我认为您可以使用 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 );

});

抱歉,目前无法对其进行测试 - 但您了解基本概念。

于 2009-10-02T16:19:18.727 回答