Javascript - 我编写的用于淡入图像的函数出现问题

Posted

技术标签:

【中文标题】Javascript - 我编写的用于淡入图像的函数出现问题【英文标题】:Javascript - having trouble with a function I wrote to fade images in 【发布时间】:2011-05-14 17:18:29 【问题描述】:

所以我编写了一个函数,其目的是将图像的不透明度从 0 淡化为 1。这意味着每 100 毫秒将不透明度增加 0.1,总持续时间为 1 秒。该函数将调用,它会增加不透明度,但它似乎只是等待100ms并立即将不透明度设置为1。有什么想法我哪里出错了吗?这是与应该淡入的功能和图像相关的代码sn-ps。我感谢任何输入=)

Javascript:

function setOpacity(id, num) 
    document.getElementById(id).style.opacity = num;


function imagePopUp(id)
    var step = 0.0;

    for(var i = 1; i <= 10; i++)
        step = i / 10;
        var num = step.toFixed(1);
        setTimeout(function()setOpacity(id, num);, 100);

    
  

HTML:

<div id ="shadowWrapper">
    <div id ="imageContainer">
         <img class ="sideImages" src ="images/mini_race1.jpg" onclick ="imagePopUp('image1')"></img>
         <img class ="sideImages" src ="images/mini_race2.jpg" onclick ="imagePopUp('image2')"></img>
         <img class ="sideImages" src ="images/mini_race3.jpg" onclick ="imagePopUp('image3')"></img>
    </div>

          <img class ="hiddenImages" id ="image1" src ="images/race_around_ireland_01.jpg"></img>
          <img class ="hiddenImages" id ="image2" src ="images/race_around_ireland_02.jpg"></img>
          <img class ="hiddenImages" id ="image3" src ="images/race_around_ireland_03.jpg"></img>    
</div>  

CSS:

#imageContainer 
    position: absolute;
    margin-top: 10px;
    width: 200px;
    height: 450px;
    left: 600px;


.sideImages 
    display: block;
    width: 150px;
    height: 112px;
    border: 1px #94b62d solid;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;


.hiddenImages 
    display: block;
    position: absolute;
    border: 1px black solid;
    left: 100px;
    opacity: 0.0;

【问题讨论】:

【参考方案1】:

您将所有回调排队等待从现在开始执行 100 毫秒。 setInterval 没有“堆栈”或“队列”功能。

此外,相同的 num 变量会在您创建的闭包中被捕获,并且在每次回调中执行时都会有其最终值。

解决这两个问题的方法是替换

setTimeout(function()setOpacity(id, num);, 100);

setTimeout(function(inum) 
    return function()setOpacity(id, inum);;
(num), i * 100);

【讨论】:

嗯,这实际上可能是真正的问题;) 是的,但实际上您也部分正确,因为num 在技术上属于该函数的范围。我将编辑答案以解决此问题。

以上是关于Javascript - 我编写的用于淡入图像的函数出现问题的主要内容,如果未能解决你的问题,请参考以下文章

全景背景图像淡入动画问题?

Android使用淡入/淡出动画更改背景图像

jquery悬停图像淡入淡出交换

带有“淡入淡出”/悬停效果的产品图像,这会导致图像移位

图像加载后在 Knockout.js 中淡入容器元素

悬停时淡入第二张图像