одушевленный backgroundPosition - PullRequest
Новая
       26

одушевленный backgroundPosition

1 голос
/ 17 июня 2011

Кто-нибудь знает, почему ниже не будет работать. Если я просто установил 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} );

    });

Ответы [ 2 ]

2 голосов
/ 17 июня 2011

Вы должны установить начальное значение backgroundPosition в IE, иначе это не будет работать, потому что он не знает, как анимировать.

также я бы изменил mouseover и mouseout, чтобы иметь одинаковый стиль, не используяпривязать один и использовать указатель мыши на другом, как в моем примере

, например: 

$("#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);
});
0 голосов
/ 17 июня 2011

Попробуйте это 

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

    });
...