流星jQuery的動畫

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

CSS流星jQuery的動畫

#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的流星。

輸出應該是這樣的

link

來源

2012-08-02 dude

當然，你可以通過將500更改爲較低的值來提高速度 – Undefined 2012-08-02 06:54:49

我試過了......但無法看到任何區別 – dude 2012-08-02 06:59:06

你的意思是像[this]（http://jsfiddle.net/7rwZ7/ ）？順便說一句，回覆評論時請使用'@'來通知。 – 2012-08-02 07:01:37

最近事情是這樣的。

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

Live test case。

這是在一個容器內使用一個圖像標籤，併爲容器內的圖像位置設置動畫。

來源

2012-08-02 07:13:30

完美謝謝!!! – dude 2012-08-02 07:15:13

流星jQuery的動畫

回答

相關問題