CODEWITHSUNDEEP
jqueryimagefade
user2086252
user2086252

Reputation:

jQuery fading two images without white

I would like to fade image without white transfer between them.

HTML:

<div class="image">
  <span><img src="1.jpg"></span>
</div>

jQuery:

$('.image > span > img').fadeOut(1000, function() {
  $('.image > span > img').attr('src', images[i]);
  $(this).fadeIn(1000);
});

This works, but there is white fade between changing. Images array contains image sources. I found this http://jsfiddle.net/byB6L/ but I can not update my code to work with that.

Upvotes: 3

Views: 7109

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206508

This should give you an idea:

var c = 0,                  // Counter index
    $img = $('.image img'), // Get images
    n = $img.length;        // How many images?

$img.eq(c).show();          // Show c one

(function loop() {          // Recursive infinite loop
    $img.delay(1000).fadeOut(800).eq(++c%n).fadeIn(800, loop);
}()); 
.image{
  position:relative;
}
.image img{
  position:absolute;
  top:0px; 
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
  <img src="http://placehold.it/300x150/bf0?text=Apples" alt="" />
  <img src="http://placehold.it/300x150/0bf?text=and" alt="" />
  <img src="http://placehold.it/300x150/fb0?text=Pears" alt="" />
</div>

Upvotes: 4

Ryxle
Ryxle

Reputation: 890

JQuery doesn't support background image animations like background color animation(which is also need to use extra plugin). So to do your animation, definitely you need to have two images.

Upvotes: 0

udidu
udidu

Reputation: 8588

This is because your using the same image on the animation end callback.

My suggestion: use position: relative; on the class="image" container, put the image element as position:absolute;, now after you are fading the image out insert a new image into the container and fade it in and remove the first image.

Example:

Html:

<div class="image">
  <span><img src="1.jpg"></span>
</div>

Css:

<style type="text/css">
    .image{position:relative;}
    .image span img{position:absolute;top:0;left:0;}
</style>

JavaScript:

<script type="text/javascript">
    $('.image > span > img').fadeOut(1000);
    var $image = $('<img alt="" src="YOUR NEW IMAGE_PATH" style="opacity:0;" />');
    $('.image > span').append($image);
    $image.fadeIn(1000, function(){
        $('.image > span > img').first().remove();
    });
</script>

Upvotes: 2

Guffa
Guffa

Reputation: 700660

Instead of fading out one image and then fading in another, use two image elements and layer them on top of each other, then just fade out the top one to make the bottom one appear instead.

CSS:

.image img { position: absolute; left: 0; top: 0; }

HTML:

<div class="image">
  <img class="bottomImage" src="http://placekitten.com/100/100"/>
  <img class="topImage" src="http://placekitten.com/g/100/100"/>
</div>

Javascript:

$('.topImage').fadeOut(3000);

Demo: http://jsfiddle.net/Guffa/grTUK/

Upvotes: 0

Related Questions