jQuery的階級動畫對象很多

我有一個表約1000行，每行看起來像jQuery的階級動畫對象很多

<div class="outer"> 
    <div class="inner_left">Name 1</div> 
    <div class="inner_right">Value 1</div> 
</div>

現在，我想用一個jQuery動畫作爲

$(".inner_right").animate({left:'50px'});

移動右欄

問題：這需要相當多的處理器時間才能運行。

所以我的問題是：

問：有沒有這樣做，而無需1000 div的單獨移動的一個更聰明的方式？

我當然可以填充表格，先填充第一列，然後填充第一列，然後分別放入一個封閉的div（然後僅對其中一個進行動畫處理）。但是（因爲有更多的東西附加到逐行過程填充），我寧願另一種解決方案。像重疊div的東西，其中一個div div既是行div的子節點也是列div的子節點。

來源

2013-12-23 Christian

使用CSS3動畫的許多元素。但無論如何，同時移動1000 div似乎很奇怪 –

這可能是個好主意，謝謝。我會研究一下（儘管乍看之下，它很難讓瀏覽器很好地運行）。 – Christian

舊版瀏覽器不支持CSS3動畫。但是就像之前所說的那樣，更好的做法是不要製作這麼多元素。我想你可以嘗試一種解決方法，並且只對visivle元素（在視口上）設置動畫，併爲其他直接左邊的屬性設置。提供一個jsfiddle可以幫助你獲得更準確的答案 –

我認爲最好的辦法是你的HTML從更改：

<div class="outer"> 
    <div class="inner_left">Name 1</div> 
    <div class="inner_right">Value 1</div> 
</div> 
<div class="outer"> 
    <div class="inner_left">Name 2</div> 
    <div class="inner_right">Value 2</div> 
</div> 
<div class="outer"> 
    <div class="inner_left">Name 3</div> 
    <div class="inner_right">Value 3</div> 
</div>

要：

<div class="outer_left"> 
    <div class="inner_left">Name 1</div> 
    <div class="inner_left">Name 2</div> 
    <div class="inner_left">Name 3</div> 
</div> 

<div class="outer_right"> 
    <div class="inner_right">Value 1</div> 
    <div class="inner_right">Value 2</div> 
    <div class="inner_right">Value 3</div> 
</div>

再往前格.outer_right

來源

2013-12-23 15:18:20

問題是它的錶行內容，你仍然需要爲每行寫一個DIV outer_right –

，我寧願不用col填充表格列出其他原因（沒有明確給出），所以我首先尋找另一種方案但是，無論如何 – Christian

如果你願意，包括另一在你的網頁上的圖書館，你可能要考慮Greensock的TweenMax。

http://api.greensock.com/js/

看一看在staggerTo（）方法，在那裏你可以在jQuery選擇傳球，這將錯開所有行。我發現它在動畫製作上比jQuery快很多。

基準測試信息：http://www.greensock.com/jquery/

的僞碼，你會是這樣的：

// link to the library 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
// the function 
<script> 
    function staggerRows(){ 
     TweenMax.staggerTo($(".inner_right"), 0.2, {left:"50px"}, 0.1); 
    } 
</script>

來源

2013-12-23 15:50:57 itsmikem

jQuery的階級動畫對象很多

回答

相關問題