CODEWITHSUNDEEP
jqueryhtmlfadeinfadeout
Cristian
Cristian

Reputation: 666

jQuery img src animation with fade

I'm trying to create an animation which changes the image source of an img element every 4.6 seconds using a fade in / out animation.

Here's my code:

var cng = false;
function change(){
  var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg',
              'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg'];
  $('img').fadeOut("slow", function(){
    $(this).attr('src', cng ? imgs[0] : imgs[1]);
    $(this).fadeIn("slow", change());
    cng = !cng;
  });
}
$(document).ready(function(){setInterval('change()', 4600);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

As you can see (click on run snippet, wait for the red image to appear and wait other 4 seconds) this is not the expected result but I don't know how to fix it...

Can you help me?

Upvotes: 0

Views: 1073

Answers (2)

IDED
IDED

Reputation: 194

The following should resolve your issue, I have expanded the function to have support for indefinite array of images so your not limited to just having two. I have also wrapped the whole thing in its own function with two external variables one the array and the other the starting point for the animation based upon the 0 index array.

$().ready({
var currentImageIndex = 0
var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg',
              'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg']
function changeImage() {
if (currentImageIndex > (imgs.length-1)){
currentImageIndex = 0
}
$('#imgAnimation').fadeOut(1000,function(){
$('#imgAnimation').attr('src',imgs[currentImageIndex]).fadeIn(1000);
currentImageIndex++
})
setTimeout(changeImage, 4600);
}
changeImage();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img id="imgAnimation" src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

To break down the code first we defined our function changeImage, its first job is to verify our counter has not passed the end of our array so we compare the counter to the arrays length minus one as length will return a count rather than the maximum index, if the counter has passed the maximum index we reset the counter to 0 being the first index in our array. Then we begin the animation steps so to ensure we only hit the target and I have included an ID reference for the image. First we fade out and using the completion function call we then set the src attribute of our image to the next value in the array then call the fade in function. Now we add one to our counter then call the timeout function asking it to call our function again after the specified delay.

If you need to expand this you could make it possible to have multiple arrays and multiple targets and have each perform its animation separately by changing the function slightly, if you want me to cover this then let me know and I will post additional code in my solution.

As the code doesnt seem to run here check the following fiddle https://jsfiddle.net/p1k71nns/ If you wish to prevent the starting fade then you can remove the src attribute for the html markup and just add a style attribute with height and width to ensure the space is reserved for your animation.

Upvotes: 1

Emeline
Emeline

Reputation: 76

You simply need to remove the callback to change once the fadeIn is completed.

BEFORE:

  $(this).fadeIn("slow", change());

AFTER:

  $(this).fadeIn("slow");

Since you're using setInterval, the change function will already be called every 4.6 seconds.

Upvotes: 1

Related Questions