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

这可以工作并替换图像而没有淡入淡出效果。我需要更改什么才能使淡入效果发挥作用？

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's anwser

中找到更新且更好的解决方案

Answer 2

我认为最好使用 fadeTo 功能，而不是使用 FadeIn 和 fadeOut fadeIn 和 fadeOut 在它们之间创建了几微秒的时间间隙。

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

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

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

Answer 3

我复制了上面给定的示例。它出现了奇怪的闪烁，我发现它在不透明度恢复到1后等待图像加载。我通过Sandeep修改了代码。

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

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

Answer 4

您无法淡入已经处于 100% Alpha 的内容:)

换句话说，您可以将其淡出或隐藏，然后再淡入。

我做了这个例子，基本上，我隐藏它然后淡化它：

http://jsfiddle.net/uGFMt/