圖像褪色點擊

Question

HTML：

<img class=change src="http://{{$image_server}}/web/product/medium/{{$prod_info.image_medium}}" style='width:380px;' /> 

JQUERY：

var images = [ "01.jpg", "02.jpg", "03.jpg" ]; 

$(function() { 
    index = 0; 
    $('.change').click(function(e) { 
    var image = images[index++]; 
    if(index == images.length) 
     index = 0; 
     $('.change').parent().fadeOut(200, function() { 
      $('.change').attr('src', ''+image); 
       $(this).fadeIn(200); 
     }); 
    }); 
}); 

我用於圖像褪色驗證碼輸入/輸出上點擊。 但是，新圖像沒有淡入我的系統。 舊圖像淡出/突然出現一個新圖像！ 我想知道如何順利​​淡入淡出新圖像。

Answer 1

嘗試這樣

增加你的淡入時間得到你想要什麼

$(function() { 
index = 0; 
$('.change').click(function(e) { 
var image = images[index]; 
index++; 
if(index == images.length) 
    index = 0; 
    $('.change').parent().fadeOut(200, function() { 
     $('.change').attr('src', image); 
      $(this).fadeIn(800); 
    }); 
}); 
}); 

See Demo

Answer 2

使用.on()，

$(document).on('click', '.change', function() { 
});