Here is a function for random search and add class

<div class="pic pos_1">1</div>
<div class="pic pos_2">2</div>
<div class="pic pos_3">3</div>

.animate {
    color: red;
}


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);

I can't understand one thing.
I know that splice() metod can delete member of array.
Here is three member of array arr
<div class="pic pos_1">1</div> - index 0
<div class="pic pos_2">2</div> - index 1
<div class="pic pos_3">3</div> - index 2

Math.random() * 2 equal 0 or 1. How here can be triggered random number of index of array?

And if splice in this case works as delete() function what number of array is triggered: Math.random() * arr.length or 1 (the next member who will be deleted)? And if this member will be deleted how it can add class? Sorry, if there is a little mess in my question but i am complitely confused here.)) And will be very greatful for explanation.

Could you clarify what you are trying to do exactly?

 

The splice method takes two arguments that must be integers, the first is the index of where you want the 'cut' to occur, the second is the length of the cut. The function returns an array containing values cut from the original array. The original array will have those items removed so it can act like a delete.

var arr = [1,2,3,4,5,6,7,8,9];

var item = arr.splice(3,2);

console.log(arr); // [1, 2, 3, 6, 7, 8, 9]
console.log(item); // [4, 5]

Math.random returns a random number anywhere between 0 and 1 so it will almost always be a decimal number, to use Math.Random to access a random index in an array we will need to ensure the random number is within range of the length of the array and convert that decimal into an integer.

Then we can use the splice method with the random number in the first parameter and a length of 1 to remove a random index of the array and store it as a variable to do with it what you will. Note that the returned value from .splice is an array, so in this case it will be an array with a single item. so access it with arr[0]

var arr = [1,2,3,4,5,6,7,8,9];

var rnd = Math.round(Math.random() * arr.length); // 3 -- assuming in this instance number 3 is returned.

var removedItem = arr.splice(rnd,1); 

console.log(removedItem); // [4]
console.log(removedItem[0]); // 4
console.log(arr); // [1,2,3,5,6,7,8,9]

Edited April 20, 201511 yr by rbrtsmith

Thank you a lot! Now i see what exactly i couldn't understand))

I thought that splice () deleted item from the array and since that time item become non-exist. Now i see that we store this in a var, so it exist exactly in its own place in array and i can manipulate with this item. Its i understand clearly now.

 

More "dark" place is integer.

"We will need to ensure the random number is within range of the length of the array and convert that decimal into an integer."

Code for this is:

Math.round(Math.random() * arr.length

All right I tried trigger random items in array for my effect and achieve it, by copying this code from internet. But i need to understand how it works, because animation is frequent task for me.
Thank you in advance. I understand)

If by dark you mean 'not fully understand' an integer is simply a whole number - no decimal place. The Math rounding methods will convert any decimal into an integer. Note that it does not change the data type. JavaScript has only one data type to represent numeric values and that is - number.

 

If there's any JavaScript methods / functions that you are unsure of use the MDN resource. here's the page for splice, it explains in a good amount of detail. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

If you are doing simple animation just add a class and let CSS handle it. Anything super complex let your beloved GSAP handle it, If you wanna write a javascript animation from scratch make use of the requestAnimationFrame.

Here's an example of using requestAnimationFrame for a basic animation http://codepen.io/rbrtsmith/pen/dobKZm

 

You should avoid making animations using setInterval or jQuery's Animate method which uses setInterval under the hood. All the animation libraries such as GSAP, Velocity etc all make use of requestAnimationFrame to sync with the browser. TL;DR: It gives much higher performance.

Edited April 20, 201511 yr by rbrtsmith

Thank you for explanation! Now i understand all code in details. Special thanks for very helpful example with requestAnimationFrame. It's completely new for me, i saved your example and will play with it to learn how it works.

Paul Irish wrote a good article on requestAnimationFrame a few years ago. here it is: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Thank you a lot for this link!