鏈接jQuery動畫

我已經將代碼鏈接在一起動畫（即向左移動，然後向右移動）。鏈接jQuery動畫

我有20個<li>標籤佈置在網格中，我正在動畫主要<ul>將所需的<li>移動到視圖中。

代碼：
x和y座標，
howFast設置爲1200，
easeItIn被設置爲「easeOutBounce」

if ($(window).width()<1259) { 
    if (screenFlipMode == "chained") { 
    (function(x, y) { //Small Chained 
     $('.elements').animate({ 
     top: y+'px' 
     }, howFast, easeItIn,function() { 
     $('.elements').animate({ 
      left: x+'px' 
     }, howFast, easeItIn); 
     }); 
    })(x,y); 
}

現在，這個問題我如果我想從第一個<li>移動到第二個<li>那麼它仍然會嘗試移動Y軸（這意味着我必須等待1200米/秒，直到X軸動畫發揮作用）。

所以...可愛的人...我的問題是，我怎麼寫一個if子句，它會說「如果目標<li>在同一行上，那麼不要做Y軸動畫...... ？

[編輯]我的網格設置如下，我要禁用Y軸或X軸取決於下一個目的地是否在同一行。（圖像下方）。

alt text http://demo.squeezedigital.com/barrie-test/jquery-grid.gif

>。<

來源

2010-06-22 Barrie Reader

動畫默認情況下，排隊，所以有在應用第一動畫的回調中的第二動畫是沒有意義的。

通過使用filter()你可以過濾掉所有不在同一行，那麼只有y動畫適用於他們的元素，那麼你可以申請的x動畫整個集合。

$('.elements') 
    .filter(function(){ 
     return $(this).offset().top !== y; 
    }) 
    .animate({ 
     top: y 
    }, howFast, easeItIn) 
    .end().animate({ 
     left: x 
    }, howFast, easeItIn);

來源

2010-06-22 15:19:47 James

完美！格拉西亞斯！ – 2010-06-22 15:22:53

您也許可以在沒有if語句的情況下解決該問題。只需改編selector可能會有所幫助。

$('.elements:first-child')

例如。另一種可能是

$('table').find('tr').find('.elements:nth-child(2)')

jQuery selectors

來源

2010-06-22 15:14:54 jAndy

我剛剛提出這個建議。 – DLH 2010-06-22 15:16:08

我不太明白，如果我有網格...我會更新我的問題其實......） – 2010-06-22 15:17:41

這裏的關鍵是您可以同時爲多個屬性設置動畫效果。所以，刪除你的回調函數，只是另一種屬性添加到第一個動畫的PARAMS：

if ($(window).width()<1259) 
{ 
    if (screenFlipMode == "chained") 
    { 
     function(x, y) 
     { //Small Chained 
      $('.elements').animate({ 
       top: y, 
       left: x 
      }, howFast, easeItIn) 
     }(x,y); 
    } 
}

如果這兩個屬性是已經在該值，它不會需要改變的，因而這種財產贏得」動畫。但另一個仍然會生動。

此外，jQuery在使用animate（）時自動將數值視爲像素，因此不需要附加「px」。這實際上可能會傷害你的表現。

來源

2010-06-22 15:40:54

鏈接jQuery動畫

回答

相關問題