Javascript 用于将随机图像立即转换到div内部的jQuery脚本

我正在尝试构建一个Javascript脚本，它将拍摄10幅图像，并让它们一个接一个地飞入一个div中。图像应随机飞入，并且每个图像应有不同的过渡

脚本大约完成了80%——我成功地将10个图标随机飞到div上，但它们都有相同的转换。我将如何给他们每个人自己的过渡，如旋转，等等

下面是我的jQuery代码：

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() {});

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”
];
函数洗牌（数组）{
var currentIndex=array.length，
时间值，随机指数；
而（0！==currentIndex）{
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}
洗牌（AVU图标）；
$（“.icon slider”）.css（“位置”、“相对”）；
var超时=0；
左向量=0；
var计数=0；
var-top=1000；
$。每个（av_图标、功能（索引、值）{
如果（左>600）{
左=0；
top=1090；
}
超时+=500；
左+=150；
计数++；
$（“.icon slider”）.append（“”）；
$（.av_图标+索引）.css({
“位置”：“绝对”，
“顶部”：“-1000px”，
“文本缩进”：“90px”
})；//文本缩进应该有助于在图像在屏幕上飞行时旋转图像，但这不起作用。
$（.av_图标+索引）。动画({
文本缩进：0，
顶部：“+=”+顶部，
左：“+=”+左，
步骤：函数（现在，fx）{
$（this）.css（'-webkit transform'，'rotate（'+now+'deg）；//本应在图像在屏幕上飞行时帮助旋转图像，但这不起作用。
},
}，超时，函数（）{}）；

在step函数中，您可以生成一个随机数，比如1到5，然后在每个情况下使用不同的转换来切换该数字

例如：

//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
}

编辑：抱歉，我只是稍微理解了你的问题。你可以使用jQuery animate函数的easing属性应用不同类型的动画。你可以在这里找到关于可用类型的更多信息：

这里有一个类似的问题（）建议这样做

$(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");

---

一个JSFIDLE和你目前为止的工作将非常有助于我们进行进一步的测试。不，不，你完美地回答了我的问题。我实际上想在step函数中以某种方式组合不同的动画…我该怎么做？这似乎不起作用：step:function（now，fx）{var num=Math.floor（（Math.random（）*10）+1）；开关（num）{case（1）：$（this）.css（'-webkit transform'，'rotate（'+now+'deg'））；break；case（2）：$（this）.css（'-webkit transform'，'rotate（0deg）scale（1）skew（'+now+'deg）translate（0px））；break；}您在问题中显示的step函数对我来说似乎应该有效，尽管它是针对Google Chrome（和其他webkit浏览器）的。我现在无法测试任何代码，但您可以尝试一下……我将编辑我以前的答案。