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

【问题标题】：jQuery Change Image src with Fade EffectjQuery 使用淡入淡出效果更改图像 src
【发布时间】：2023-03-26 10:31:01
【问题描述】：

我正在尝试创建一种效果，您单击缩略图图像，缩略图的链接将替换主图像，但将其淡入。这是我当前使用的代码：

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

这可以工作并替换没有淡入淡出效果的图像。我需要进行哪些更改才能使淡入淡出效果起作用？

【问题讨论】：

标签： jquery image fade

【解决方案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。

Here's a jsFiddle example.

编辑：你可以在Sandeep Pal's anwser找到更新更好的解决方案

【讨论】：

确保检查@Sandeep Pal 的并发淡入/淡出，而不是在它们之间出现延迟。如果这就是你要找的。span>

【解决方案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;
});

【讨论】：

我在为 Firefox 设置淡入/淡出时遇到了问题。此解决方案适用于所有浏览器。谢谢！

【解决方案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;
});`

【讨论】：

【解决方案4】：

你不能淡入已经处于 100% alpha 的东西:)

换句话说，要么将其淡出，要么将其隐藏，然后再淡入。

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

http://jsfiddle.net/uGFMt/

【讨论】：