анимированные элементы в случайной последовательности

Question

Я стараюсь оживить некоторые кнопки. Должна быть создана случайная строка, в которой анимированные кнопки всегда находятся в одной последовательности. fiddle

пример:

text = 1423 

первый анимационный кнопка btn1 затем после того, как один второй btn4 затем после того, как один второй btn2 затем через одну секунду btn3

кнопок:

<div> 
    <button name="btn1" type="submit" id="btn1" value="1" style="" class="button"></button> 
    <button name="btn2" type="submit" id="btn2" value="2" style="" class="button"></button> 
    </div> 
    <div> 
    <button name="btn3" type="submit" id="btn3" value="3" style="" class="button"></button> 
    <button name="btn4" type="submit" id="btn4" value="4" style="" class="button"></button> 
</div> 

javascript:

var textArray = []; 
var text = ""; 
function makeid() 
{ 

    var possible = "1234"; 

    for(var i=0; i < 4; i++) 
     text += possible.charAt(Math.floor(Math.random() * possible.length)); 

    return text; 
} 
makeid(); 
textArray = text.split(""); 
console.log(textArray); 

function animate1() { 

$('#btn' + textArray[0]).animate({ backgroundColor: 'red' }, 500);  
} 
function animate2() { 

$('#btn' + textArray[1]).animate({ backgroundColor: 'red' }, 500); 
} 
function animate3() { 

    $('#btn' + textArray[2]).animate({ backgroundColor: 'red' }, 500);  
} 
function animate4() { 

$('#btn' + textArray[3]).animate({ backgroundColor: 'red' }, 500); 
} 

window.setTimeout(animate1, 1000); 
window.setTimeout(animate2, 2000); 
window.setTimeout(animate3, 3000); 
window.setTimeout(animate4, 4000); 

Answer 1

Ваш вопрос о перетасовке possible text, потому что в вашей функции есть вероятность, что такое же число повторяется. например: 2,2,2,1 или 4,4,4,4 и так далее.

вы можете использовать эту функцию воспроизведения в случайном порядке, а не ваш метод перетасовки:

function shuffleWord(word) { 
    var shuffledWord = ''; 
    var charIndex = 0; 
    word = word.split(''); 
    while (word.length > 0) { 
     charIndex = word.length * Math.random() << 0; 
     shuffledWord += word[charIndex]; 
     word.splice(charIndex, 1); 
    } 
    return shuffledWord; 
} 

См JsFiddle вашего примера после обновления.

Answer 2

Вы не можете анимировать backgroundColor, если не используется jQuery.Color плагин, jQuery animate docs

Все анимированные свойства должны быть анимированы одним числовым значением, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть анимированными, используя базовую функциональность jQuery (например, ширина, высота, или левая сторона может быть анимирована, но фонового цвета не может быть, если не используется плагин jQuery.Color).

И вы позволяете дублировать идентификаторы при создании случайного порядка. Кроме того, код может быть упрощен.

var textArray = []; 

function makeid() { 
    var num; 
    var possible = "1234"; 

    while(textArray.length < 4) { 
     num = possible.charAt(Math.floor(Math.random() * possible.length)); 

     if (textArray.indexOf(num) === -1) { 
      textArray.push(num) 
     } 
    } 
} 

function animate(id, wait) { 
    setTimeout(function() { 
    $('#btn' + id).animate({ width: '200'}, 500); 
    }, wait); 
} 

makeid(); 
for (var i=0; i < textArray.length; i++) { 
    animate(textArray[i], i * 1000) 
} 

fiddle