jQuery script for random images to transition inside div at once

Question

I am trying to build a Javascript script that will take 10 images and have them fly into a div, one beside an other. The images should fly in at random, and there should be a different transition for each image.

The script is about 80% complete - I am successfully randomly flying 10 icons onto the div, but they all have the same transitions. How would I give them each their own transition, like rotate, ect?

Below is my jQuery code:

var av_icons = ["/2015/06/icon1.png",
    "/2015/06/icon2.png",
    "/2015/06/icon3.png",
    "/2015/06/icon4.png",
    "/2015/06/icon5.png",
    "/2015/06/icon6.png",
    "/2015/06/icon7.png",
    "/2015/06/icon8.png",
    "/2015/06/icon9.png",
    "/2015/06/icon10.png"
];

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}
shuffle(av_icons);

$(".icon-slider").css("position", "relative");
var timeout = 0;
var left = 0;
var count = 0;
var top = 1000;
$.each(av_icons, function(index, value) {
            if (left > 600) {
                left = 0;
                top = 1090;
            }
            timeout += 500;
            left += 150;
            count++;
            $(".icon-slider").append("<img src='http://domain.com/wp-content/uploads" + value + "' height='80' width='90' class='av_icon_" + index + "' />");
            $(".av_icon_" + index).css({
                "position": "absolute",
                "top": "-1000px",
                "text-indent": "90px"
            }); //text-indent is supposed to help rotate the images as they fly on screen, but this does not work.
            $(".av_icon_" + index).animate({
                textIndent: 0,
                top: "+=" + top,
                left: "+=" + left,
                step: function(now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)'); //supposed to help rotate the images as they fly on screen, but this does not work.
                },
            }, timeout, function() {});

Answer 1

Inside the step function you could generate a random number, say between 1 and 5, and then do a switch on that number with a different transition in each case.

For example:

//Generate a random number between 1 and 5
var num = Math.floor(Math.random() * 5) + 1;
switch(num) {
case(1):
    transition 1;
    break;
//and so on
}

Edit: Sorry I just understood your question a bit better. You can apply different types of animation by using the easing property of the jQuery animate function. You'll find more information on the available types here: http://api.jquery.com/animate/

There is a similar question here (Using Step function in animate to transform-rotate an element) where this is suggested.

$(this).css ({"-moz-transform":"rotate("+now+"deg)",
                  "-webkit-transform":"rotate("+now+"deg)",
                  "-ms-transform":"rotate("+now+"deg)",
                  "-o-transform":"rotate("+now+"deg)"});
}, duration: 5000}, "linear");