CODEWITHSUNDEEP
javascriptjqueryimagefadesetinterval
noname
noname

Reputation: 97

jQuery randomly fadeIn images

I have a container with a lot of small images.

<div id="container">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
   ...
   <img src="100.jpg" />
</div>

I set opacity to 0. (not hidding) Then I want to show(fadeIn) random image after half second. for example 5th, 1st, 55th ...

Any suggestions, thanx a lot

Upvotes: 6

Views: 8972

Answers (5)

Daniele Crews
Daniele Crews

Reputation: 11

If you want to fade-in all images instead, theres no need to use all the random stuff, just cicle and delay a random number between 500ms and 1 second. You have to put hide function anyway. Or with opacity use animate css.

$('#container img').each(function(index) {

   $(this).delay( Math.random()*500+500 ).fadeIn();

});

you won't find nothing simpler than that, and with the same effect

Upvotes: 1

Josh
Josh

Reputation: 6322

try this

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#container > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#container > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
</script>

Upvotes: 4

karim79
karim79

Reputation: 342625

I would use the random number generated to create the image's 'src' attribute and build the jQuery selector accordingly:

setInterval ( showRandomImage, 500 );

function showRandomImage()
{
    var randNo = Math.floor(Math.random() * 101);
    $("#container > img[src=" + randNo + "'.jpg']")
                   .animate({opacity: 0}, 500).fadeIn('slow');
}

Upvotes: 0

Yacoby
Yacoby

Reputation: 55445

It is not clear (to me) if you want to start fading after half a second, or fade in in half a second. However, going with fade in after half a second. If you want to do it otherwise, just ignore the stuff with setTimeout()

The general overview of what you want to do is:
Create a function when the page has loaded that is called after half a second (setTimeout)
That function should generate a random number, with the min as 0, and the max as the number of children of the #container element minus 1
Fade the child of the #container with the index supplied by the random number.

Pusdo code (It is a long time since I have done anything with jQuery. Or Javascript for that matter)

function onDocumentReady(){
    setTimeout(500, "fadeInRandom()");
}

function fadeInRandom(){    
    var numElements = $("#container").children().length;
    var randomElem = Math.random() * (numElements-1);
    $("#container").children()[randomElem].fadeIn();
}

Upvotes: 1

Jhonny D. Cano -Leftware-
Jhonny D. Cano -Leftware-

Reputation: 18013

put an id to each image, with a number pattern, and then fade a image with a random generated id, using math.random from javascript

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}

Upvotes: 1

Related Questions