jquery - 背景位置をアニメートする

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の初期値を設定する必要があります。そうしないと、アニメーション化する方法がわからないため、これは機能しません。

また、私の例のように、マウスオーバーとマウスアウトを変更して、バインドオンワンを使用せず、他のマウスオーバーを使用しない同じスタイルにします

このような：

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

    });