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秒。

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

1 个答案: