jquery - 点击时图像褪色

Question

HTML：

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

查询：

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);
    });
});
});

看演示

Answer 2

使用.on(),

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