Jquery random animate content on page load

Question

I am not very skilled with jQuery, but I have been playing around with it.

Been working on this website who has a mosaic design on front-page with a lot of pictures. Who are placed in divs.

I want this divs to random load when you go into the page.

I have already tried

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

But that loads the whole page. I want the divs to:

Random animate in
Page to animate out and into another page when you click a link

Is this possible?

You want to display a random collection of divs (ie. not all of the divs) or you want to display all the divs using a random animation to show them? — Grim..., May 12 '11 at 14:15

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

I'm assuming all of the div's have a class of .ih so when you select that class all of them show up.

Try something like this:

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

$(divs).show();

Where I put (0, 10) put the # of div's you want.

EDIT: Example modified from Showing random divs using Jquery

edited May 23 '17 at 11:47

Community

1
1

answered May 12 '11 at 14:26

silent1mezzo

2,814
4
26
46

score 0 · Answer 2 · answered May 13 '11 at 02:50

Yes, this is possible. I'm doubt there will be a plugin that does exactly what you want, but with a little work, you'll be able to build this. You have a pretty good start of dividing the problem into discrete steps:

Step 1 page load: The simplest will be just to load the page without all the images- plain HTML. You will want to get this loading step to finish as fast as possible.

Step 2 animate the images in: First, build a list of the images and where they go. I'm not sure if you will the order and the position, or just the order. Either way, it'll work. Build this into a nice array.

Second, you'll want to animate these in one by one, in a sequential manner:

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!
    }
  });
}

There are more concise ways of doing this in a batch fashion, but this may be useful as you try different effects.

Step 3: To handle the animate out, you'll just implement your own jQuery click handler:

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

Obviously this is a rough sketch to get started.

Jquery random animate content on page load

2 Answers2