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

图像在点击时淡入淡出

2 个答案: