Question

我有类似的东西

<div id="dis_image"></div>

<div id="images">
<img src="1/1.jpg" class="image" style="opacity:0.3" />
<img src="1/2.jpg" class="image" style="opacity:0.3" />
</div>

<ul style="display:none" id="images_list">
<li>testing 1</li>
<li>testing 2</li>
</ul>

我打算每隔5秒钟做一次，我希望id:images_list上的第一个文字显示在id:dis_images和id:images上，第一张图片的不透明度从0.3变为1 然后，进入第二个，第一个文本和第一个图像被第二个文本和第二个图像替换，因此具有不透明度。第一张图像应恢复正常的不透明度0.3

我已经尝试了这个但是它没有正常工作，因为它终于停止了。

jquery的：

setInterval(function() {
    $("#dis_image").html("");
    $('#images_list :nth-child(1)').next().show().fadeOut(1200).appendTo('#dis_image');
    $('#images :nth-child(1)').next().css({ opacity: 1 });

} , 5000);

Answer 1

使用延迟（mil sec）功能等待5秒，如： $（你的元素id）.delay（5000）.slideDown（'slow'）它只是样本，您可以在延迟功能后使用自己的功能

Answer 2

appendTo（）方法移动元素，因此您要从列表中删除元素，并且在下一次迭代中，它不存在。试试clone()。

jquery淡出文本和图像不透明度的变化

2 个答案: