ansaurus

Question

Answer 1

A:

You can use setInterval() for a repeated timed action:

$(function() {
  setInterval(300, cycle_images);
});

function cycle_images() {
  var banner = $("#BannerDiv");
  if (banner.is(":hidden")) {
    banner.children().hide().end().show();
  }
  var images = banner.children("img");
  var visible = images.filter(":visible");
  var index = images.index(visible);
  var next = (index + 1) % images.length;
  visible.fadeOut(100, function() {
    images[next].fadeIn(100);
  });
}

As for whether to hide the banner and/or images with CSS (external or inline), my personal opinion is that it is generally better to do it this way because if you don't it can result in a noticeable flicker if the ready() event is delayed for any reason.

cletus 2010-04-05 11:22:13

@cletus see my edit.. Should i make my div visible before doing it..

bala3569 2010-04-05 11:23:00

@cletus what does `cycle_images` parameter takes for `setInterval` function...

bala3569 2010-04-05 11:24:41

@cletus i llet you know once i get the effect....

bala3569 2010-04-05 11:26:27

@cletus should i set `display:none` to div or not...

bala3569 2010-04-05 11:29:39

@cletus error `useless setInterval call (missing quotes around argument?)` when i used the above function..

bala3569 2010-04-05 11:33:56

Answer 2

A:

(function($){
$.fn.showdelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).fadeIn(100);
        delay += 300;
    });
};
})(jQuery);

usage: $("#BannerDiv").children().showdelay();

maybe a little more elegant.

Kind Regards

--Andy

jAndy 2010-04-05 11:30:00

It only cycles through all the elements once.

CodeJoust 2010-04-05 11:35:16

Answer 3

+2 A:

Here's a quick way to do it:

$(function() {
    $('#BannerDiv > :first').show();
    setTimeout(rotate, 1000);
});

function rotate() {
  var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
    setTimeout(rotate, 3000);
  }).next().css({ 'z-index': 1 }).show();
  if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}

You'd need the following CSS to match (adjust dimensions to yours):

#BannerDiv {width: 400px; height: 200px;}
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}

Here's an example using colored divs, it would be the exact same when replaced with images like you want.

Nick Craver 2010-04-05 11:58:22

@Nick look at my second edit... There is no errors but still empty page...

bala3569 2010-04-05 12:25:29

@Nick still three images are showing on initial page load...

bala3569 2010-04-05 12:54:55

@bala3569 - With the `#BannerDiv img` CSS that shouldn't be happening, do you have a link to your page?

Nick Craver 2010-04-05 12:56:50

@Nick ya i didnt notice that..

bala3569 2010-04-05 13:01:12

@Nick great stuff nick...

bala3569 2010-04-05 13:07:39

ansaurus

tags:

views:

answers:

Jquery image blur effect with in a div?

related questions