通過div循環以隨機順序添加課程

我有多個相同的元素'圖片'類，每個類都有自己的增量類（pos_1，pos2，pos_3等），它控制着它在頁面上的位置。通過div循環以隨機順序添加課程

我想要創建一個循環，以便每個元素都有'動畫'類添加到它，但我想以隨機順序遍歷元素。

如果我不想使用JS中元素的硬編碼數組，我該如何做到這一點。

我的HTML元素的例子是：

<div class="pic pos_1"> 
    ... 
</div> 

<div class="pic pos_2"> 
    ... 
</div> 

<div class="pic pos_3"> 
    ... 
</div>

來源

2013-10-14 zizther

使用Math.random（）返回一個介於0和1之間的數字。根據元素的數量，劃分0-1的範圍。因此，你可以像這樣使用它。當且僅當Math.random（）返回的值大於0.7時，假設元素將具有類「動畫」。這有道理嗎？ – Mozak

嘗試

var arr = $('.pic').get(); 
while(arr.length){ 
    var el = arr.splice(Math.floor(Math.random() * arr.length), 1); 
    $(el).addClass('animate') 
}

演示：Fiddle

更新

var arr = $('.pic').get(); 

function random(arr) { 
    if (!arr.length) { 
     return; 
    } 
    var el = arr.splice(Math.floor(Math.random() * arr.length), 1); 
    $(el).addClass('animate'); 
    setTimeout(function() { 
     random(arr); 
    }, 1000 + Math.floor(Math.random() * 1000)) 
} 
random(arr);

演示：Fiddle

來源

2013-10-14 09:56:01

很好的答案。是否有可能以1到2秒之間的隨機間隔將動畫類添加到元素？ – zizther

@zizther查看更新 –

偉大的工作。最後一部分，是否有可能多個.pic元素同時移動，而不是一次一個？ – zizther

創建你的div數的長度的陣列和混洗陣列。現在使用其索引循環訪問該數組，並相應地分配類。

來源

2013-10-14 09:54:57 Rayon

獲取你的頁面圖片的總數和隨機選擇圖片的索引你想要顯示的是

//Remove 'animate' class from all pictures. 
$('.pic').removeClass('animate'); 
//Count of pictures in your page. 
var picCount = $('.pic').length();  
//Random index of picture. 
var picIndexToShow = Math.floor(Math.random() * picCount); 

//Random picture from page 
var randomPic = $($('.pic')[picIndexToShow]); 
//Add 'animate' class 
randomPic.addClass('animate');

來源

2013-10-14 09:59:55 Epsil0neR

感謝您的回答。這是我的錯，我沒有說清楚。然後，將動畫類添加到不同時間間隔的.pic元素，以便它們以隨機順序出現在頁面上？ – zizther

通過div循環以隨機順序添加課程

回答

相關問題