javascript - 用于随机图像的 jQuery 脚本一次在 div 内转换

Question

我正在尝试构建一个 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() {});

Answer 1

在 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 函数的缓动属性来应用不同类型的动画。您将在此处找到有关可用类型的更多信息:http://api.jquery.com/animate/

这里有一个类似的问题 ( Using Step function in animate to transform-rotate an element )，建议这样做。

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