Jquery random animate content on page load
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 开发者_StackOverflow社区
Is this possible?
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
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.
精彩评论