CODEWITHSUNDEEP
javascriptjquery
Sebbe
Sebbe

Reputation: 21

Problems with FadeIn and FadeOut images

I have a fade script, but the images ar not fading nicely. First of all the first image fade out and than the next image fade in. Between the fading you see nothing. I want that the images fade-out and fade-in at the same time.

Does anybody knows how to fix it? I think i have to edit some lines below.

for (var i = 0; i < slider.num; i++) {
   if(i == slider.cur || i == pos) continue;
   jQuery('#' + d[i].id).hide();
}

if(slider.cur != -1){
   jQuery('#' + d[slider.cur].id).stop(false,true);
   jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed ,function(){
      jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
   });
}
else
{
   jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}

Upvotes: 2

Views: 384

Answers (2)

pimvdb
pimvdb

Reputation: 154838

If they should fade at the same time, they should be positioned at the same place with CSS, so that they show up at the same position:

div img {
    position: absolute; /* absolute positioning in the div */
    left: 0; /* position the images at the top left hand corner of the div */
    top: 0;
}

div {
    position: relative; /* relative positioning of the div itself */
}

You can then animate two images at the same time by not using the success callback. The callback is only run when the animation is completed.

var imgs = $("div img"); // images

imgs.slice(1).hide(); // hide all except first
$("div").show(); // show the div (hide it initially because the images
                 // are loading which causes some flicker)

function fade(i) {
    imgs.eq(i).fadeOut(1000);    // fade out this one
    imgs.eq(i + 1).fadeIn(1000); // fade in next one immediately
}

var i = 0;
setInterval(function() {
    fade(i); // fade to the next image every 2 seconds
    i++;
}, 2000);

http://jsfiddle.net/KXkHs/

Upvotes: 3

Ben L
Ben L

Reputation: 2561

If you want the fadeIn and fadeOut to happen at the same time you need to take the FadeIn out of the success callback and put it parallel to the fadOut function:

  if(slider.cur != -1){
    jQuery('#' + d[slider.cur].id).stop(false,true);
    jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
    jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
  }

Upvotes: 1

Related Questions