Java Script / JQuery Tuturial

Java Script-JQuery Image

Demonstrating basic cross fade function

This demo is a response to one question that many web developers ask. The need to have image slideshow and adverts on every website entails the need to have a tutorial like this. In this tutorial I am going to explain how to build cross fade effect into your website using JavaScript and CSS opacity property.

The Concept

In the code below, you will find a function called fadeOut, others may include fadeIn function in their tutorials but that isn't included this code. As the function name defines, it does the fade out.

How it works

The CSS Opacity property of the element to be faded out is decreased or increased using JavaScript native. To achieve the fade effect, the fade out (and fadeIn) functions are recursively called while at the same time the JavaScript's setTimeout function introduces a time delay.

In absence of fadeIn function, you will find helper functions such as rotatePics and slideImages functions that do exactly what their names describe. The code is self-explanatory, however, comments are included to aid readability.

Happy learning!


  
          // JavaScript Document

            var slideImages = $('.box_36 img');
            var numberOfImages = slideImages.length;

            slideImages.hide();

            rotatePics(1);

            function rotatePics(currentPhoto){
              
              // will return 0 when currentPhoto = numberOfImages
              currentPhoto = currentPhoto % numberOfImages;
              
              slideImages.eq(currentPhoto)
                       .fadeOut(function(){
                  
                      slideImages.each(function(i){
                  
                        $(this).css(
                          'z-index', ( ((numberOfImages - i ) + currentPhoto) % numberOfImages) );
                    
                      }) // end each loop
                      
                      $(this).siblings().show();
                
                      //$(this).siblings().not(':visible').show();
                
                      setTimeout(function(){
                          rotatePics(++currentPhoto);
                      }, 2000)
                  
                    });// end fade out function

                  
          
Demo

I hope you enjoyed the tutorials and learned something new