.animate() 不起作用？

发布于 2024-12-02 11:31:51 字数 1143 浏览 2 评论 0原文

无法使我的背景图像'位置动画

$(function() {
$('#nav1').bind('click',function(event){
        $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); 
});
    $(function() {
    $('#nav2').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 38px'}, 1000); 
});
    $(function() {
    $('#nav3').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 76px'}, 1000); 
});
    $(function() {
    $('#nav4').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 114px'}, 1000); 
});

和html代码是

<ul class="nav">
<li><a href="#what"  id="nav1">what</a></li>
<li><a href="#who" id="nav2">who</a></li>
<li><a href="#portfolio" id="nav3">portfolio</a></li>
<li><a href="#contact" id="nav4">contact</a></li>
</ul>

我尝试不使用像这样的像素{backgroundPosition：'0 38'}但它仍然没有动画它只是改变了位置

，还有另一个问题。我为菜单中的每个项目重复了 jquery 代码，请您将其放在一个函数中，每个项目的位置垂直移动 38px。谢谢，

原文

can't make my background image' position animate

$(function() {
$('#nav1').bind('click',function(event){
        $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); 
});
    $(function() {
    $('#nav2').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 38px'}, 1000); 
});
    $(function() {
    $('#nav3').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 76px'}, 1000); 
});
    $(function() {
    $('#nav4').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 114px'}, 1000); 
});

and html code is

<ul class="nav">
<li><a href="#what"  id="nav1">what</a></li>
<li><a href="#who" id="nav2">who</a></li>
<li><a href="#portfolio" id="nav3">portfolio</a></li>
<li><a href="#contact" id="nav4">contact</a></li>
</ul>

i've tried not using pixels like this {backgroundPosition: '0 38'} but it still not animating it just changed the position

and there is another issue. i repeat the jquery code for each item in the menu , could you plz make it in one function ,the position shifts 38px vertically for each item.
thanks,

分享到QQ

分享到微博

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

发布评论

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

夢归不見 2024-12-09 11:31:51

不是你。

jQuery 本身不支持背景位置动画。不过，有一个很棒的插件：
http://www.protofunc.com/scripts/jquery/backgroundPosition/

这是您要求的功能：

$(function() {
    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * 38;
            $(this).stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 1000); 
        });
    });
});

It's not you.

jQuery doesn't natively support background position animations. However, there is a wonderful plugin:
http://www.protofunc.com/scripts/jquery/backgroundPosition/

And here's the function you asked for:

$(function() {
    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * 38;
            $(this).stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 1000); 
        });
    });
});

回复收藏 0 原文