Question

我创建了以下代码，在页面加载时为页面上的所有div添加了不透明度：1。这样做的所有图像都可以在页面加载中看到，但是我希望每个图像都缓慢淡入，并且在一个完全加载/可见之后我希望第二个图像加载完全相同然后是第三个。

如何通过以下代码完成此操作;什么需要改变/添加？请注意它必须使用纯Javascript;没有CSS3或jQuery作为我工作的专有框架需要纯JS。

＆＃13;

var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');

function fadeIn() {
  imageOne.style.opacity = '1';
  imageTwo.style.opacity = '1';
  imageThr.style.opacity = '1';
}

＆＃13;

#imageOne {
  background: url('https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  float: left;
  opacity: 0;
}
#imageTwo {
  background: url('http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  float: left;
  opacity: 0;
}
#imageThr {
  background: url('http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  float: left;
  opacity: 0;
}

＆＃13;

<body onload="fadeIn()">
  <div id="wrapper">
    <div id="imageOne"></div>
    <div id="imageTwo"></div>
    <div id="imageThr"></div>
  </div>
</body>

＆＃13;

Answer 1

您可以使用CSS转换，这种转换速度更快，并且不需要jQuery。

.fadeIn {
    transition: opacity 1.25s;
}

将班级fadeIn添加到您的图片元素中，现在它就会淡出。

要使其逐个淡出，请使用JavaScript计时器将不透明度设置为1.示例：

var elements = [ /* Image elements to fade */ ];

for (var i = 0; i < elements.length; i++) {
    setTimeout(function() {
        elements[i].style.opacity = 1;
    }, 1250 * i);
}

Answer 2

您可以使用fadeIn的回调功能加载其他图像

function fadeIn() {
$("#imageOne").fadeIn("fast",function(){
      $("#imageTwo").fadeIn("fast", function(){
           $("#imageThr").fadeIn("fast");
      });
   });
 }

Answer 3

这是我到目前为止所提出的。不幸的是，我还没有想到如何让它们淡入，因为下面只是让它们一个接一个地出现。虽然它是纯粹的Javascript。

有什么建议吗？

＆＃13;

AnimationUtils.loadAnimation(this,  R.drawable.animate);

＆＃13;

Javascript：在页面加载时淡入图像;一个接一个地？

3 个答案: