Looking to add a dynamic div that fades in and out randomly with varying sizes and positions?
You may have already tried displaying three images with fade-in and fade-out effects, but struggled with randomizing their placement and size.
Check out this example on jsFiddle for inspiration!
Here's the jQuery code snippet:
jQuery(function(){
function random(n) {
return Math.floor(Math.random() * n);
}
var transition_time = 2500;
var waiting_time = 100;
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);
})
And here's the HTML code snippet:
<div id="block">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
</div>