0

我的横幅中的下拉菜单有以下 CSS：

#nav-menu li a
{
    background-image:url('../images/menu_background.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
}


#nav-menu li a:hover
{
    background-image:url('../images/menu_background_hover.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;

}

它工作正常，除了当我将鼠标悬停在<li>标签上时我想要一些动画效果。<li>目前，当我将鼠标悬停在它上面时，它只是替换了背景颜色。

我尝试了下面的示例代码，该代码更改了 li 标签的左边距，但我不知道如何在悬停时为 css 过渡设置动画：

$j(document).ready(function () {

    //When mouse rolls over
    $j("#nav-menu li").hover(function () {

        $j(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $j(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });

});

非常感谢您的任何建议。

4

2 回答 2

1

这篇文章的引述，

Blockquote 我想你必须通过不使用真正的背景图像来解决这个问题，而是使用包含图像的 div 元素，使用 position: absolute （或固定）和 z-index 进行堆叠。然后，您将为这些 div 设置动画。块引用

于 2012-09-05T14:32:12.430 回答
0

我通过删除变量名中的j后面来实现这一点。$

小提琴：http: //jsfiddle.net/XjxBj/

$(document).ready(function () {
    //When mouse rolls over
    $("#nav-menu li").hover(function () {
        $(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });
});​
于 2012-09-05T14:37:10.307 回答