动画backgroundPosition

Question

任何人都知道为什么以下不起作用。如果我只是在没有动画的情况下直接设置css就行了。 //div.css( {backgroundPosition: "bottom left"} );

   $("#menu li").bind("mouseover", function(){
        var div=$(this).find('div');
        div.css( {backgroundPosition: "bottom left"} );
        div.stop().animate( {backgroundPosition: '25px 0px'}, {duration:500} );
    })
    .mouseout(function(){
        var div=$(this).find('div');
        div.stop().animate( {backgroundPosition: "0px 0px"}, {duration:500} );

    });

Answer 1

你必须在IE中设置backgroundPosition的初始值，否则这不会起作用，因为它不知道如何制作动画。

我还会改变mouseover和mouseout以使其具有相同的样式，不使用bind onone并在另一个上使用鼠标悬停，就像在我的示例中一样

像这样：

$("#menu li > div").css({
    backgroundPosition: "0px 0px"
})

$("#menu li").mouseover(function() {
    var div = $(this).find('div');
    div.stop().animate({
        backgroundPosition: '25px 0px'
    }, 500);
}).mouseout(function() {
    var div = $(this).find('div');
    div.stop().animate({
        backgroundPosition: "0px 0px"
    }, 500);
});

Answer 2

试试这个

$("#menu li").bind("mouseover", function(){
        var div=$(this).find('div');
        div.stop().animate( {backgroundPosition: '25px 0px'}, 500 );
    })
    .mouseout(function(){
        var div=$(this).find('div');
        div.stop().animate( {backgroundPosition: "0px 0px"}, 500 );

    });