淡入淡出元素從數組中褪色 - jQuery

Question

我有4 div我的網頁上的項目，我試圖讓這些項目的內部html隨機淡出，從數組中取一行並淡入，在 - 取而代之，這是否有意義？

// My items that I would like to repopulate the faded out info 

var testimonialsArray = [ 
    "<div class='change'><h1>Box 5</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 6</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 7</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 8</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 9</h1><p>Lorem ipsum</p></div>" 
]; 

// Find a random div and fade it out 

var order = Math.floor((Math.random()* $('.change').length)+1); 

$('.box').eq(order).find('.change').fadeOut(); 

.......Fade in new data from an array row 

http://jsfiddle.net/crn7dysu/1/

Answer 1

基於我認爲你想做的事：

var order = Math.floor((Math.random()* $('.change').length)); 

$('.box').eq(order).find('.change').fadeOut(function(){ 
    $(this).html(testimonialsArray[Math.floor((Math.random()* testimonialsArray.length))]).fadeIn(); 
}); 

的jsfiddle：http://jsfiddle.net/crn7dysu/4/

Answer 2

假設你從Math.random()得到0和$('.change').length是10

Math.floor((0 * 10) + 1); 

你可以看到，這個代碼永遠不會生成0作爲輸出。

這一個，而不是將生成所有可能的組合：

Math.floor(Math.random()* $('.change').length); 

Answer 3

你可以使用此腳本：

var testimonialsArray = [ 
    "<div class='change'><h1>Box 5</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 6</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 7</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 8</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 9</h1><p>Lorem ipsum</p></div>" 
]; 

var order = Math.floor((Math.random()* $('.box').length)+1); 
var newOrder = Math.floor((Math.random()* testimonialsArray.length)); 

$('.box:nth-child('+order+')').find(".change").fadeOut(function() { 
    $(testimonialsArray[newOrder]).appendTo('.box:nth-child('+order+')').hide().fadeIn('slow'); 
}); 

Updated Fiddle