2009-11-06 35 views
0

我有一個圖像,我可以放心地用jQuery查看。爲什麼jQuery的緩和不那麼流暢

<style> 

#box 
{ 
    position:relative; 
    left:-400px; 
    height:50px; 
    width:100px; 
} 

</style> 


$(document).ready(function() 
    { 
     var method; 

     $("#clickme").toggle(function() 
     { 
      method = $("#box").attr("class"); 
      $("#box").animate({left:"50%"},{duration: 1000,easing: method}); 

     },function() 
     { 
      method = $("#box").attr("class"); 
      $("#box").animate({left:"-400px"},{duration: 1000,easing: method}); 
     }); 
    }); 

它大約是400x600像素,並且圖像滑動的渲染是平滑但粗糙的。

將在動畫中看起來像這樣的次數:

|   | 
|   | 
    |   | 
    |   | 
|   | 
|   | 

如果|是圖像的邊緣。

這是因爲我的瀏覽器/電腦渲染功能?上網本中的Chrome/FF/Safari。

回答

1

它看起來像你遇到了瀏覽器/硬件組合的侷限性。請記住,JavaScript動畫高度依賴於瀏覽器的計算機和JavaScript引擎的功能。

在高端工作站上看起來不錯的東西在低端筆記本電腦上可能看起來不太好。

0

你是否在同一頁面上運行任何Flash?

如果是這樣,我已經在同一頁面上混合使用Jquery和Flash的幾個問題,他們可以有大量的性能點擊。通常情況下,Flash是透明的,但真正打擊計算機。

爲了澄清,圖像加載時是否「跳躍」,或圖像本身加載不良?如果跳轉,那可能是一個簡單的CSS問題 - 如果我能看到你的CSS有什麼問題,就可以解決這個問題。如果不是,那就是形象,賈斯汀可能已經爲你解決了。你能夠在更強大的電腦上測試嗎?

+0

我添加了上面的CSS。沒有閃光燈在運行。我知道Flash減慢了一切:/它更像是一個'跳躍',混合了未對齊的渲染,按照我的|畫畫。圖像質量是完美的。 它有點像圖像在頁面上移動,瀏覽器呈現頂部100像素(垂直),然後呈現下一個100像素,但動畫已經移動到另一側100像素,所以它跳動了蹣跚。如果這是有道理的......我會盡快在一臺好電腦上測試是的! – ian

+0

嗨伊恩,如果你把時間減慢,該怎麼辦?它仍然跳? – dooburt