动画背景位置

发布于 2024-11-16 00:24:07 字数 511 浏览 4 评论 0原文

任何人都知道为什么下面的方法不起作用。如果我直接设置 css 而不使用动画，它就可以工作。 //div.css( {backgroundPosition: "左下"} );

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

    });

原文

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} );

    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗地喜欢 2024-11-23 00:24:07

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

另外，我会将鼠标悬停和鼠标悬停更改为具有相同的样式，不使用绑定 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);
});

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

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

like this:

$("#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 原文

樱娆 2024-11-23 00:24:07

试试这个

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

    });

Try this

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

    });

回复收藏 0 原文

~没有更多了~