Post
Ask Question

Fade-in Fade-out Slider using jQuery

The jQuery fadeIn() effect animates the opacity of the matched elements from hidden to visible (fading effect).This method is often used together with the fadeOut() method.

Syntax

selector.fadeIn( speed, [callback] );

The jQuery fadeOut effect changes the opacity, for selected elements, from visible to hidden (fading effect). This method is often used together with the fadeIn() method.

Syntax

selector.fadeOut( speed, [callback] );

It is similar to the .fadeTo () method but that method does not unhide the element and can specify the final opacity level. Use basic HTML code to create the HTML elements.

The following is the HTML code I used for this tutorial.

HTML

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head></head>  
  5.   
  6. <body>  
  7.     <div id="pics">  
  8.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/02-128.png" width="128" height="128" id="picOne" />  
  9.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/03-128.png" width="128" height="128" id="picTwo" />  
  10.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/04-128.png" width="128" height="128" id="picThree" />  
  11.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/05-128.png" width="128" height="128" id="picFour" />  
  12.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/06-128.png" width="128" height="128" id="picFive" />  
  13.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/07-128.png" width="128" height="128" id="picSix" />  
  14.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/08-128.png" width="128" height="128" id="picSeven" />  
  15.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/09-128.png" width="128" height="128" id="picEight" />  
  16.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/10-128.png" width="128" height="128" id="picNine" />  
  17.     </div>  
  18. </body>  
  19.   
  20. </html>  
The preceding HTML code defines the div element groups and their child elements. Use the IMG tag to add multiple images between parent div tags.

CSS

Use CSS code to make the look and feel for all the HTML elements as we used before in the HTML part. The following is the CSS code I have used in this tutorial.
  1. #  
  2. pics {  
  3.     margin - left: 600 px;  
  4.     margin - top: 150 px;  
  5.     margin - bottom: 150 px;  
  6. }  
  7.   
  8. #  
  9. title {  
  10.     margin - left: 500 px;  
  11.     margin - right: 320 px;  
  12.     margin - top: 150 px;  
  13.     margin - bottom: 150 px;  
  14.   
  15. }  
  16. body {  
  17.     background - color: MediumSpringGreen;  
  18. }#  
  19. picOne, #picTwo, #picThree, #picFour, #picFive, #picSix, #picSeven, #picEight, #picNine {  
  20.     position: absolute;  
  21.     display: none;  
  22. }#  
  23. pics {  
  24.     width: 128 px;  
  25.     height: 128 px;  
  26. }  
Before adding the CSS code, be sure it covers the entire browser display area. The preceding CSS code defines the entire HTML element design process.

jQuery scripting

The first step in the jQuery scripting part is to include the required jQuery library reference in the head element of your page.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
The following is the complete jQuery and JavaScript code I used in this tutorial.
  1. <script>  
  2.     $(document).ready(function() {  
  3.         $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);  
  4.         $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);  
  5.         $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);  
  6.         $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);  
  7.         $('#picFive').delay(20000).fadeIn(1500).delay(3500).fadeOut(1500);  
  8.         $('#picSix').delay(25000).fadeIn(1500).delay(3500).fadeOut(1500);  
  9.         $('#picSeven').delay(30000).fadeIn(1500).delay(3500).fadeOut(1500);  
  10.         $('#picEight').delay(35000).fadeIn(1500).delay(3500).fadeOut(1500);  
  11.         $('#picNine').delay(40000).fadeIn(1500).delay(3500).fadeOut(1500);  
  12.         var delay = 40000;  
  13.         var URL = 'http://2.bp.blogspot.com/-2mNLuYYudGs/VV__xP-jFiI/AAAAAAAABsg/CMXsLd_zlnc/s1600/best-wishes-of-onam.jpg';  
  14.         setTimeout(function() {  
  15.             window.location = URL;  
  16.         }, delay);  
  17.     });  
  18. </script>  
The preceding jQuery scripting code improves the performance of the application and it defines the entire HTML element UI functionality and effects.

Complete code

The following is the complete HTML, CSS and jQuery scripting codes I used in this tutorial.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <style>  
  6.         #pics {  
  7.             margin-left: 600px;  
  8.             margin-top: 150px;  
  9.             margin-bottom: 150px;  
  10.         }  
  11.           
  12.         #title {  
  13.             margin-left: 500px;  
  14.             margin-right: 320px;  
  15.             margin-top: 150px;  
  16.             margin-bottom: 150px;  
  17.         }  
  18.           
  19.         body {  
  20.             background-color: MediumSpringGreen;  
  21.         }  
  22.           
  23.         #picOne,  
  24.         #picTwo,  
  25.         #picThree,  
  26.         #picFour,  
  27.         #picFive,  
  28.         #picSix,  
  29.         #picSeven,  
  30.         #picEight,  
  31.         #picNine {  
  32.             position: absolute;  
  33.             display: none;  
  34.         }  
  35.           
  36.         #pics {  
  37.             width: 128px;  
  38.             height: 128px;  
  39.         }  
  40.     </style>  
  41.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  42.     <script>  
  43.         $(document).ready(function() {  
  44.             $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);  
  45.             $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);  
  46.             $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);  
  47.             $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);  
  48.             $('#picFive').delay(20000).fadeIn(1500).delay(3500).fadeOut(1500);  
  49.             $('#picSix').delay(25000).fadeIn(1500).delay(3500).fadeOut(1500);  
  50.             $('#picSeven').delay(30000).fadeIn(1500).delay(3500).fadeOut(1500);  
  51.             $('#picEight').delay(35000).fadeIn(1500).delay(3500).fadeOut(1500);  
  52.             $('#picNine').delay(40000).fadeIn(1500).delay(3500).fadeOut(1500);  
  53.             var delay = 40000;  
  54.             var URL = 'http://2.bp.blogspot.com/-2mNLuYYudGs/VV__xP-jFiI/AAAAAAAABsg/CMXsLd_zlnc/s1600/best-wishes-of-onam.jpg';  
  55.             setTimeout(function() {  
  56.                 window.location = URL;  
  57.             }, delay);  
  58.         });  
  59.     </script>  
  60. </head>  
  61.   
  62. <body>  
  63.     <div id="pics">  
  64.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/02-128.png" width="128" height="128" id="picOne" />  
  65.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/03-128.png" width="128" height="128" id="picTwo" />  
  66.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/04-128.png" width="128" height="128" id="picThree" />  
  67.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/05-128.png" width="128" height="128" id="picFour" />  
  68.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/06-128.png" width="128" height="128" id="picFive" />  
  69.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/07-128.png" width="128" height="128" id="picSix" />  
  70.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/08-128.png" width="128" height="128" id="picSeven" />  
  71.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/09-128.png" width="128" height="128" id="picEight" />  
  72.         <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/10-128.png" width="128" height="128" id="picNine" />  
  73.     </div>  
  74. </body>  
  75.   
  76. </html>  
Output

1. Open the main Index html file in a web browser.

Main index page
Figure 1: Main index page

2. FadeIn animates the image fromn 1 to 9.

FadeIn animate image output
Figure 2: FadeIn animate

FadeIn animate image
Figure 3: FadeIn animate

FadeIn animate
Figure 4: FadeIn animate

Redirect to new URL
Figure 5: Redirect to new URL

Conclusion

I hope you liked this useful article. It will be useful for jQuery beginners. Please provide your valuable feedback and suggestions.

Live demo link: Jsfiddle

References


Similar Articles