Как добавить эффект затухания в функцию change_image

Question

У меня есть массив изображений с функцией изменения изображения в javascript. Функция вызывается изображением, связанным с ссылкой с (href = "javascript: change_image (1) в html.

Сценарий отлично работает при загрузке в html, но я хотел бы добавить эффект затухания к нему так, что каждое изображение исчезает и новый выцветает Может кто-нибудь поставить меня в правильном направлении

Я действительно ценю это ..

сценарий:.?

var Image = new Array("Img/1.jpg","Img/2.jpg","Img/3.jpg","Img/4.jpg","Img/5.jpg","Img/6.jpg"); 

var Image_Number = 0; 
var Image_Length = Image.length - 1; 

function change_image(num){ 

Image_Number = Image_Number + num; 

if (Image_Number>Image_Length){ 

    Image_Number = 0; 
} 
if (Image_Number<0){ 

    Image_Number = Image_Length; 
} 


document.slideshow.src= Image[Image_Number]; 

return false; 
} 

Answer 1

Как насчет это?

HTML:

<img id="image" src="Img/1.jpg"><br> 
<span id="change_image">Change image!</span> 

JS:

var images = ["Img/1.jpg", "Img/2.jpg", "Img/3.jpg", "Img/4.jpg"]; 

$(document).ready(function(){ 
    var image_number = 0; 
    // Click handler for "change image" link 
    $("#change_image").click(function(){ 
     // Get number of next image (loop) 
     image_number = (image_number + 1) % images.length; 
     // Make sure the image is loaded (if not, preload it) 
     $("<img>").attr("src", images[image_number]).load(function(){ 
      // As soon as the next image is loaded, fade out the current one... 
      $("#image").fadeOut(function(){ 
       // ...and fade in the new image :) 
       $(this).attr("src", images[image_number]).fadeIn(); 
      }); 
     }); 
    }); 
}); 

DEMO (JSFiddle)