jQuery 带淡入淡出的 img src 动画

Question

我正在尝试创建一个动画，它使用淡入/淡出动画每 4.6 秒更改一次 img 元素的图像源。

这是我的代码：

var cng = false;
function change(){
  var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg',
              'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg'];
  $('img').fadeOut("slow", function(){
    $(this).attr('src', cng ? imgs[0] : imgs[1]);
    $(this).fadeIn("slow", change());
    cng = !cng;
  });
}
$(document).ready(function(){setInterval('change()', 4600);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

如您所见（点击运行片段，等待红色图像出现并等待其他 4 秒）这不是预期的结果，但我不知道如何修复它。 .

你能帮帮我吗？

Answer 1

淡入完成后，您只需删除回调即可更改。

之前：

  $(this).fadeIn("slow", change());

之后：

  $(this).fadeIn("slow");

由于您使用的是 setInterval，更改函数将每 4.6 秒调用一次。

Answer 2

以下应该可以解决您的问题，我已经扩展了该功能以支持不确定的图像数组，因此您不限于只有两个。我还用两个外部变量将整个东西包装在它自己的函数中，一个是数组，另一个是基于 0 索引数组的动画起点。

$().ready({
var currentImageIndex = 0
var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg',
              'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg']
function changeImage() {
if (currentImageIndex > (imgs.length-1)){
currentImageIndex = 0
}
$('#imgAnimation').fadeOut(1000,function(){
$('#imgAnimation').attr('src',imgs[currentImageIndex]).fadeIn(1000);
currentImageIndex++
})
setTimeout(changeImage, 4600);
}
changeImage();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img id="imgAnimation" src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

为了分解代码，我们首先定义了我们的函数 changeImage，它的第一项工作是验证我们的计数器没有超过数组的末尾，所以我们将计数器与数组长度减一进行比较，因为长度将 return 一个计数而不是最大索引，如果计数器已经超过最大索引，我们将计数器重置为 0，即数组中的第一个索引。然后我们开始动画步骤以确保我们只击中目标并且我已经包含了图像的 ID 参考。首先我们淡出并使用完成函数调用，然后我们将图像的 src 属性设置为数组中的下一个值，然后调用淡入函数。现在我们向计数器加一，然后调用超时函数，要求它在指定的延迟后再次调用我们的函数。

如果你需要扩展这个，你可以让多个数组和多个目标成为可能，并通过稍微改变函数来让每个数组分别执行它的动画，如果你想让我介绍这个，请告诉我，我会的post 我的解决方案中的附加代码。

由于代码似乎没有运行这里检查以下内容 fiddle https://jsfiddle.net/p1k71nns/ 如果你想防止开始淡入淡出，那么你可以删除 html 标记的 src 属性，只添加一个带有高度和宽度的样式属性，以确保为你的动画保留 space。

jQuery 带淡入淡出的 img src 动画

jQuery img src animation with fade

html

jquery

fadeout

fadein