Jquery случайный анимационный контент при загрузке страницы

Question

Я не очень опытен с jQuery, но я играл с ним.

Работал над этим веб-сайтом с мозаичным дизайном на первой странице с множеством картинок.Кто помещен в div.

Я хочу, чтобы эти div'ы загружались случайным образом при переходе на страницу.

Я уже пробовал

$(function() {
   $('.ih').hide().fadeIn('slow');
});

Но это загружает всестр.Я хочу, чтобы div:

• Произвольная анимация на странице
• для анимации и перехода на другую страницу при нажатии на ссылку

Возможно ли это?

Answer 1

Я предполагаю, что у всех div есть класс .ih, поэтому, когда вы выбираете этот класс, все они появляются.

Попробуйте что-то вроде этого:

var divs = $(".ih").get().sort(function(){ 
    return Math.round(Math.random());
}).slice(0, 10 );

$(divs).show();

Куда я положил (0, 10), укажите желаемое количество div.

РЕДАКТИРОВАТЬ: Пример изменен с Отображение случайных div с использованием Jquery

Answer 2

Да, это возможно. Я сомневаюсь, что будет плагин, который будет делать то, что вы хотите, но с небольшой работой, вы сможете построить это. Вы довольно неплохо начали разбивать проблему на отдельные шаги:

Шаг 1 загрузка страницы : Самое простое будет просто загрузить страницу без всех изображений - обычный HTML. Вы хотите, чтобы этот шаг загрузки завершился как можно быстрее.

Шаг 2 анимируйте изображения в : Сначала создайте список изображений и их направление. Я не уверен, если вы будете заказ и должность, или просто заказ. В любом случае, это будет работать. Постройте это в хороший массив.

Во-вторых, вы хотите анимировать их последовательно, последовательно:

var imgs = ...

function animateOne() {
  var img = imgs.pop();
  // preload the image
  (new Image).src = img.src;

  // set it up
  $(img.dom).css('opacity',0).attr('src',img.src);

  // animate it in
  $(img.dom).animate('fast', { opacity: 1 }, function() {
    if (imgs.length) {
      animateOne(); // recurse when we're done with the last one!
    }
  });
}

Существуют более краткие способы сделать это в пакетном режиме, но это может быть полезно, когда вы пробуете разные эффекты.

Шаг 3: Для обработки анимации , вы просто реализуете свой собственный обработчик кликов jQuery:

$(...).click(function() {
  $(this).animate(...);
  return false;
});

Очевидно, это грубый набросок для начала.