JavaScript Img Slider With Fade

So, I have been trying to make a slideshow for my website. I have got the slideshow working fine, but then I decided to add some fading between images by changing the opacity slowl

Solution 1:

setTimeout is not what you need. First of all you must know that setTimeout function is not always precise. On your code the problem has to do with the one-thread, non-blocking nature of javascript. When you go into the loop of loopChange function what it really happens is:

the execution comes to the loop part. The variable i is instantiated having the value 0. The loop runs 10 times. During all this times each "setTimeout" call tells javascript "I know you can only run one thread. So, when you finish what you are doing change the opacity after i*200 milliseconds". Though, what javascript is doing is to iterate! So when the iteration ends then all these queued commands will execute.

And now we get in the asynchronous nature of the language. Exactly because all the commands will execute AFTER the iteration ends the variable i will have the value 10. So all of the setTimeout will execute:

changeOpacity((1-(10*0.02)))},(10*200)

This is why this code doesn't work. I believe that the jQuery animate proposed by TheOtherGuy is a good solution though I would consider working with css3 transitions which are much smoother. Take a look here: http://www.w3schools.com/css3/css3_transitions.asp

Solution 2:

1) make a div

2) set its with/height to match the dimensions of your images

3) use this

 function toggleImg(imgurl,effectDuration)
 {
     $('#DIV').animate( {opacity: 0}, effectDuration/2 , function(){
         $(this)
             .css( { 'background-image': 'url('+imgurl+')' } )
             .animate( {opacity: 1} , effectDuration/2 );
     });
 }
 //~ can't get any easier than that.

......:::::: A Big Friendly Button! ::::::......

Since you can't animate( { backgroundImage: 'img.png',opacity:1 }, 500);

We had to improvise.

Step 1. Fade out
$('#DIV').animate({opacity: 0}, fadeDuration/2 , function(){ /*on completion*/});

Step 2. Change the image
function(){ $(this).css({'background-image':'url('+imgurl+')'}) ...

Step 2. Fade in
... animate({opacity:1},fadeDuration/2); ...

~> The code ... explained

$('#div') follows the exact same logic of documentGetElementById('div')
but it allows you to use JQueries functions.

animate

1. CSS property to animate

2. The animations duration

3. A function which will be called when the animation is complete.

css

'background-image' is the css property and imgurl is its value. i.e. '../img/hello.png'

In jquery you can call link many functions because most of them return $(this) so:

$('#mydiv').css().animate().toggle().css().animate() // ... etc ...

~> In other words

.animate( /* objects with their values */ , /* duration */ , /* callback function */ )
.css( /* objects with their values */ )

~> You can also do this if you like.

 function callMeWhenUrDone()
 {
       $('#mydiv').css( { 'background-image': 'url('+imgurl+')' } );
       $('#mydiv').animate( {opacity: 1} , effectDuration/2 );
 }

 function toggleImg(imgurl,effectDuration)
 {
     $('#mydiv').animate( {opacity: 0}, effectDuration/2 , callMeWhenUrDone );
 }
 //~ cheesy function