动画背景位置

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 而在另一个上使用 mouseover

像这样：

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

    });