Question

当我有这段代码时：

$("img").each(function(i) {
   $(this).delay(i*100).fadeIn('slow');
});

可以看到实时here，以更好地举例说明它的作用......

...如何让这些图片以随机顺序显示？这意味着不是从左上角到右下角，而是随机地像图像45，图像100，图像3等......？

Answer 1

http://blog.staydecent.ca/entry/jquery-random-each

function randsort(c) {
    var o = new Array();
    for (var i = 0; i < c; i++) {
        var n = Math.floor(Math.random()*c);
        if( jQuery.inArray(n, o) > 0 ) --i;
        else o.push(n);
    }
    return o;
}

var e = $('div'); // The elements we're searching
var c = e.size(); // Total number of those elements
var r = randsort(c); // an array of the element indices in random order

$("div").each(function(i) {
    var e = $(this);
    e.fadeTo(0, 0.05);
    setTimeout(function(){
        e.fadeTo(250, 1);
    }, r[i]*10);
});

Answer 2

您是否尝试过使用random（）？

$("img").each(function(i) {
   $(this).delay(Math.random()*100).fadeIn('slow');
});

Answer 3

应该可以随机使用数组中的数组和弹出值，直到没有剩下。

编辑：刚写了这个自定义函数......

演示：http://jsfiddle.net/XqRYq/


(function( $ ){
    $.fn.cascadeMe = function() {

        return this.each(function() {           

            var $this = $(this);
            var obj = $(this).children('span');
            var arr = $.makeArray(obj);          
            arr.sort(function() {return 0.5 - Math.random()});          
            $this.empty().show();
            arr.push("");

            var delay = 150;

            $.each(arr, function(i, val) {
                $this.append(val);
                $this.children('span').hide().fadeIn(500).delay(delay * i);
            });

        });

    };
})( jQuery );

...使用

$('#someDiv').cascadeMe();

Answer 4

你想避免使用fadeOut，因为它会设置display：none;在你的元素上，然后当它们淡入时，它们就会到处都是。这是一个更好的功能，可以从淡入淡出中得到你想要的东西。（是的，我在你的网站上测试了它。）

$("img").sort(function(a,b){return Math.round(Math.random())-0.5}).each(function(i) {
    $(this).delay(i*100).fadeTo('slow',1);
});

您需要在页面加载时将图像设置为可见，但将所有不透明度设置为0.

如何使用jQuery以随机顺序显示图像

4 个答案: