Как сделать так, чтобы изображения отображались в случайном порядке с помощью jQuery

#jquery

Вопрос:

Когда у меня есть этот код:

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

Который можно увидеть вживую здесь, чтобы дать лучший пример того, что он делает…

… Как я могу заставить эти изображения отображаться в случайном порядке? Это означает, что не сверху слева направо, а случайным образом, как изображение 45, изображение 100, изображение 3 и т.д. … ?

Ответ №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);
});

1. @RiMMER: Демонстрационная страница на связанном сайте работает нормально. Редактировать: кажется, я по ошибке вставил «предварительно случайный» блок кода. Исправлен мой ответ.

2. Спасибо, это вроде как работает, но по какой-то причине мне пришлось изменить свой HTML. Это не хочет работать с $("#content .entry img") , но это работает с $("#content .entry") . это неправильно…

Ответ №2:

Вы пробовали использовать random() ?

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

Ответ №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();

Ответ №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.