Question

我的横幅广告中有以下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>上时，它只会替换$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'); }); });的背景颜色。

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

{{1}}

非常感谢任何建议。

Answer 1

此post的引用，

块引用我猜你不得不通过不使用真正的背景图像解决这个问题，但是包含图像的div元素，使用position：absolute（或fixed）和z-index进行堆叠。然后，您将为这些div设置动画。块引用

Answer 2

我通过删除变量名中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');
    });
});

鼠标悬停时的css转换

2 个答案: