jquery - 流星jQuery动画

Question

$('#sstar').animate({'opacity':1}, 300);
$('#sstar').animate({
        'backgroundPosition':'0px 0px','top':'30%', 'opacity':0
    }, 500);

css

#sstar 
{
    position:absolute;
    left:2px;
    top:10;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:99999;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

动画运行很慢？如何像流星一样显示它？

或者举一个例子来展示一个使用 jquery 的流星。

输出应该是这样的

关联

Answer 1

最接近的事情是这样的。

HTML：

<div id="Background">
    <img src="http://www.com-geo.org/conferences/2011/images/presentations/deco/star_orange_20.png" id="Star" />
</div>​

CSS：

#Background {
    position: relative;
    background-image:url(http://nightsky.org.uk/night_sky_pics/night_sky_1.jpg);
    width: 400px;
    height: 309px;
}

#Star {
    position: absolute;
    right: 20px;
    top: 20px;
}
​

jQuery 代码很简单：

$('#Star').animate({"right": "360px", "top": "150px"}, 1500);​

现场测试用例。

这是在容器内使用图像标签并为容器内的图像位置设置动画。