3

我正在尝试使用 css sprites 制作动画（请告诉我我的方法是否正确），请检查以下 jquery 代码...

$(document).ready(function() {
    setTimeout("boat()",20);
});
function boat(){
    $("#boat").animate({right:"+=110%"},20000).css("background-position","0 0").animate({left:"+=110%"},20000).css("background-position","0 -68px")
    setTimeout("boat()",20000);
}

CSS： 

#boat {
    margin-top:160px;
    position:absolute;
    margin-left:100%;
    width:150px;
    height:68px;
    background-image:url(plane.png);
    background-repeat:no-repeat;
}

动画效果完美（从右到左，从左到右），但有一个小问题，css sprite 没有按预期工作。它只占用这个属性.css("background-position","0 -68px")

4

2 回答 2

1

这是因为您将所有内容都应用在一个中。.css("background-position","0 0") 和 .css("background-position","0 -68px") 你想实现什么？动画完成时不应该是回调吗？

尝试这个：

 $(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=110%"},10000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=110%"},10000, boat);
    });
}

你可以在这里查看：http: //jsfiddle.net/7GV9G/20/

这将是连续的。从右到左比从左到右再比一次，永远循环。如果您不想要它一次，请从第二个动画中删除船回调。

于 2012-04-17T10:40:01.613 回答
1

嗨，正如您在上面提到的那样发布我的答案:) 看到这个：http: //jsfiddle.net/UzLxZ/9/show/ && 代码在这里：http: //jsfiddle.net/UzLxZ/9/ &&和我之前的开始是这样的：http: //jsfiddle.net/5dqwP/1/

这另一个版本为您确切需要http://jsfiddle.net/UzLxZ/20/show/（等待蓝色框走出屏幕并回来）或 http://jsfiddle.net/UzLxZ/21/show/ && 代码在http://jsfiddle.net/UzLxZ/20这里；你可以到处玩，让它漂亮。:)

进一步编辑

http://jsfiddle.net/8sVDE/ - 这可能会给你更多的想法。

** http://archive.plugins.jquery.com/project/Pause-Resume-animation 或 **在 JQuery 中鼠标悬停和鼠标悬停时停止和继续动画的方式

有确切的想法你在找什么。

希望这会有所帮助：（将鼠标悬停在蓝色框上，您将获得一次完整的重复）

因此，这个 jsfiddle 向您准确展示了您想要的内容，即引用- “我想暂停然后在鼠标悬停时恢复并在 1 次成功运行后停止（意味着完成完整功能，从右到左和从左到右）”

如果这有帮助，请告诉我，祝你愉快，干杯！

jQuery代码

$(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=100%"},1000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=100%"},1000).stop();
    });
   // alert('foo');
}



$("#boat").mouseover(function(){
   boat(); 

});
​
于 2012-04-17T20:46:36.770 回答