动画背景位置 [英] animate backgroundPosition

问题描述

任何人都知道为什么以下内容不起作用.如果我只是直接设置css而不设置动​​画，那么它将起作用. //div.css( {backgroundPosition: "bottom left"} );

Anyone know why the below would not work. If I just set the css directly without animate it works. //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} );

    });

推荐答案

您必须在IE中设置backgroundPosition的初始值，否则将不起作用，因为它不知道如何设置动画.

you have to set the initial value of the backgroundPosition in IE otherwise this wont work because it doesn't know how to animate.

我也将mouseover和mouseout更改为相同的样式，而不像我的示例那样使用bind onone并在另一个上使用mouseover

also i would change the mouseover and mouseout to have the same style not using bind onone and using the mouseover on the other like in my example

像这样:

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

这篇关于动画背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！