jQuery img src动画与淡入淡出

我试图创建一个动画，使用淡入/淡出动画每4.6秒更改img元素的图像源。jQuery img src动画与淡入淡出

这里是我的代码：

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秒），这不是预期的结果但我不知道如何修复它...

你能帮我吗？

来源

2017-03-14 Cristian

以下内容应该可以解决您的问题，我已经扩展了支持无限期图像阵列的功能，所以您不仅仅限于拥有两个图像。我也用自己的函数将两个外部变量包含在数组中，另一个是基于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，其首要任务是验证我们的柜台没有通过我们的数组的结尾，所以我们比较计数器阵列长度因为长度减1将返回一个计数而不是最大索引，如果计数器已经通过最大索引，我们将计数器重置为0，这是我们数组中的第一个索引。然后，我们开始动画步骤，以确保我们只击中目标，并且包含图像的ID参考。首先我们淡出并使用完成函数调用，然后将图像的src属性设置为数组中的下一个值，然后调用淡入功能。现在我们给计数器添加一个，然后调用timeout函数，让它在指定的延迟后再次调用我们的函数。

如果你需要扩展这个，你可以让多个数组和多个目标成为可能，并通过稍微改变函数分别执行其动画，如果你想让我覆盖这个，然后让我知道，我会发布我的解决方案中的其他代码

由于代码不似乎跑这里来检查以下小提琴 https://jsfiddle.net/p1k71nns/ 如果你想防止起始褪色，那么你可以删除src属性的HTML标记，只是添加样式属性具有高度和宽度，以保证该空间为您的动画保留。

来源

2017-03-14 16:39:39 IDED

一旦完成了fadeIn，您只需删除回调即可进行更改。

BEFORE：

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

AFTER：

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

由于您使用的setInterval，改变功能就已经被每4.6秒调用。

来源

2017-03-14 15:55:26 Emeline

jQuery img src动画与淡入淡出

回答

相关问题