javascript - 使用淡入和/或淡出添加我的 2 个图像的动画

Question

<div id="figure">
<img name="slide">
<script type="text/javascript">
var step=1, timer; // declare timer
function slideit()
{
    if(timer){ // if there is any timer
     setTimeout(function(){
            clearTimeout(timer); // clearTimeout after 1 min (30000 ms)
     }, 30*1000);
    }
    document.images.slide.src = eval("image"+step+".src");
    if(step<2)
    step++;
    else
    step=1;
    timer = setTimeout("slideit()",5000); // assign a setTimeout to the timer.
}
slideit();
</script>

我正在尝试学习 javascript/jquery，了解如何使用过渡淡入和/或淡出在我的 2 张图像上添加动画。

Answer 1

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>

页面加载后，jQuery .fadeIn() 函数会在 1500 毫秒(或 1.5 秒)内淡出我们的第一张图像。 .delay() 函数充当计数器并等待 3500 毫秒(或 3.5 秒)，然后 .fadeOut() 函数在 1500 毫秒(或 1.5 秒)后将其淡出。

在第一个图像在页面加载时执行其操作的同时，.delay() 函数使第二个图像在 .fadeIn() 函数在 1.5 秒内淡入之前等待 5 秒。