jQuery使用淡入淡出效果更改图像src

Question

我正在尝试创建一个效果,您单击缩略图图像,缩略图的链接将替换主图像,但淡入其中.这是我目前使用的代码:

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery").fadeIn(400, function() {
        $(".boat_listing .mainGallery").attr('src',$imgURL);
    });
});

这适用于替换图像而没有淡入淡出效果.我需要更改什么才能使fadeIn效果起作用？

Answer 1

你必须先做它fadeOut(),或隐藏它.

试试这个 :

$(".thumbs a").click(function(e) {
    e.preventDefault();
    $imgURL = $(this).attr("href");
    $(".boat_listing .mainGallery")
        .fadeOut(400, function() {
            $(".boat_listing .mainGallery").attr('src',$imgURL);
        })
        .fadeIn(400);
});

它应该fadeOut是图像,然后改变src它隐藏的时间,然后fadeIn.

这是一个jsFiddle示例.

编辑:您可以在Sandeep Pal的anwser中找到更新,更好的解决方案

Answer 2

我不是使用FadeIn和fadeOut,而是更好地使用fadeTo功能作为fadeIn和fadeOut在它们之间创建了一个时间间隔几微秒.

我使用了Sylvain的上述代码:谢谢他

$("#link").click(function() {

  $("#image").fadeTo(1000,0.30, function() {
      $("#image").attr("src",$("#link").attr("href"));
  }).fadeTo(500,1);
  return false;
});