jquery - クリックすると画像がフェード

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

デモを見る

Answer 2

.on()、_

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