jQuery動畫排序

我已經在jsFiddle中重新創建了我目前在我的網站上的內容。我想將點擊功能變成基於時間的動畫，從第一個div（我的例子中的圖像）被「選中」開始。幾秒鐘後，例如2000毫秒，它應該將10px重新設置爲默認狀態，下一個div應該將10px設置爲「暫停」2000毫秒的「選定」狀態。我希望繼續這樣做，直到所有元素都以這種方式動畫，然後通過在最後一個div動畫完成時將第一個div返回到「selected」狀態，無限期地重複動畫過程。我一直在試圖找出自己的想法，但我似乎無法正確設置延遲。jQuery動畫排序

以下是當前功能演示：http://jsfiddle.net/uFPtw/5及以下JS：

var prevLeft = 0; 
var zInd = $('#projects div').length + 1; 
$('#projects div').each(function() { 
    prevLeft = prevLeft + 40; 
    zInd = zInd - 1; 
    $(this).css({ 
     'left': (prevLeft-40)+'px', 
     'z-index': zInd 
    }); 
}); 
$('#projects div').on('click', function() { 
    $(this).css({ 
     'z-index': $('#projects div').length, 
     'box-shadow': '0 0 20px #000', 
     'cursor': 'default' 
    }).animate({ 
     'top': '+10px' 
    }, 200); 
    if ($('#projects div').css('top') != '0') { 
     $(this).siblings('div').css({ 
      'box-shadow': '0 0 10px rgba(0,0,0,0.5)', 
      'cursor': 'pointer' 
     }).animate({ 
      'top': '0' 
     }, 200); 
    } 
    zInd1 = 4; 
    $(this).prevAll().each(function() { 
     zInd1 = zInd1 - 1; 
     $(this).css({ 
      'z-index': zInd1 
     }); 
    }); 
    $(this).nextAll().each(function() { 
     zInd1 = zInd1 - 1; 
     $(this).css({ 
      'z-index': zInd1 
     }); 
    }); 
});

來源

2013-04-04 tenub

我覺得你先佔領div`s總數（在你的情況，截至目前），那麼當點擊事件被觸發或者你的自動化功能啓動，你可以檢查你是否已經到達最後一個div，根據這個div你可以恢復到第一個div並再次調用目標函數。

來源

2013-04-04 06:30:44 dreamweiver

tenub，你實際上一次拿起所有的div，然後進行操作，但我認爲你可以通過一次取得單個div來實現相同的功能，我的意思是將範圍縮小到單個項目，這會幫助你實現你的目標:) – dreamweiver 2013-04-04 06:34:48

我想你也需要這個過濾器來選擇那些不是動畫$（this）.filter（'：not（：animated）'） – 2013-04-04 07:55:19

我正在尋找替換點擊功能完全以時間爲基礎的動畫。我只是無法弄清楚如何去做。我不想同時擁有這兩個。 – tenub 2013-04-04 10:14:02

jQuery動畫排序

回答

相關問題