使用JavaScript淡化图像(不是JQuery!)

Question

嘿大家我有一个家庭作业问题,

我需要使用JavaScript淡入淡出图像"gallery-style".注意:不是JQuery.根据作业大纲,我不能使用JQuery.

所以有一个图像网格(如果你关心的话,它们有32个),它们都是100x100px的缩略图.每个都在它自己的div中,整个东西嵌套在另一个div中,如下所示:

gallery.html

<div id="imageContent">

<div id="img" class="imageWhite" 
     onclick="fade(1984)"
     onmouseover="highlightWhiteFunction(this)" 
     onmouseout="unHighlightFunction(this)"> 
     <img src="../Media/Thumbs/1984.jpg"/> 
</div>

...31 others just like that

</div> //End of the whole container

因此,当您单击其中一个图像时,它应该将该图像淡入其他所有图像的顶部.此图片的宽度应为500px,但高度可能会有所不同,因此不会出现失真.同样,我不能使用JQuery ......是的,我知道这会让生活变得更轻松.

到目前为止,我只有一个调试的东西来检测我至少可以找到哪个被点击:

gallery.js

function fade(name) {
    var theName = name;
    console.debug("Clicked " + theName);
}

如果用户点击此图片上的任意位置,则需要淡出.如果用户点击另一个缩略图,它不需要淡出,它可以消失,但另一个需要开始淡入.

我的想法:显然我需要一个宽度为500的隐藏div,当这些动作发生时,我会根据需要隐藏/取消隐藏div.我从教授那里得到的要点是,使用JavaScript,你可以根据从系统中获得的时间长度来改变不透明度.

我在这里的答案中寻找的可能是一些更明确(更详细)的关于如何解决这个问题的提示.我知道它需要看起来如何,而且我很确定我知道如何做到这一点的高级别,我只是不知道如何开始使用代码.

任何帮助将不胜感激,我将回答任何后续问题.

再说一遍:没有JQuery!:)

Answer 1

这样的事情应该有效

 function fadeIn(el, time) {
     el.style.opacity = 0;
     el.style.display = "block";

     var last = +new Date();
     var tick = function() {
          el.style.opacity = +el.style.opacity + (new Date() - last) / time;
          last = +new Date();

          if (+el.style.opacity < 1) {
               (window.requestAnimationFrame && requestAnimationFrame(tick)) ||      setTimeout(tick, 16)
          }
     };

     tick();
}

这是一个例子:http: //jsfiddle.net/cEDbs/

只需单击图像onclick即可使用该元素调用该方法.