CODEWITHSUNDEEP
jqueryhtmlcssimage
BBB
BBB

Reputation: 21

randomly fade images in and out

I want to fade in and out some images,randomly from when the page loads until closed. What I have so for. css

#block{position:relative;top:100px;left:100px;}

HTML

<div id="block">
<img src="images/block/blockone.jpg"width="95"height="95">
<img src="images/block/blocktwo.jpg"width="95"height="95">
//Five images as such
</div>

The script

function random(n){
return Math.floor(Math.random()*n);
var transition_time=500;
var waiting_time=500;
var images=$('div#block img');
var n=images.length;
var current=random(n);
images.hide();
images.eq(current).show();
var interval_id=setInterval(function(){
images.eq(current).fadeOut(transition_time,function(){current=random(n);
images.eq(current).fadeIn(transition_time);
});
},2*transition_time+waiting_time);

It is not working and I' really like to hear your advice

Upvotes: 1

Views: 1832

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

There is a syntax error in the code, also move the code under dom ready hadnler

jQuery(function(){
    function random(n) {
        return Math.floor(Math.random() * n);
    }// this was missing
    var transition_time = 500;
    var waiting_time = 500;
    var images = $('div#block img').hide();
    var n = images.length;
    var current = random(n);
    images.hide();
    images.eq(current).show();

    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(n);
            images.eq(current).fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})

Demo: Fiddle

Upvotes: 4

Related Questions