纯JavaScript淡入功能 [英] Pure JavaScript fade in function

问题描述

嗨朋友，当我点击另一个div时，我想淡入div，为此我使用下面的代码。 Code1 工作正常，但我需要使用 Code2 。

Hi friends i want to fade in a div when i click on another div and for that i am using following code. Code1 works fine but i require to use the Code2.

我知道有jQuery但我需要做这在JavaScript中

I know there is jQuery but i require to do this in JavaScript

你能指导我，我正在做什么样的错误或者我需要改变什么......

Can you guide me that what kind of mistake i am doing or what i need change...

Code1 ---工作正常

function starter() { fin(); }

function fin()
{
    for (i = 0; i <= 1; i += 0.01)
    {
        i=Math.round(i*100)/100;
        setTimeout("seto(" + i + ")", i * 1000);
    }
}

function seto(opa)
{
    var ele = document.getElementById("div1");
    ele.style.opacity = opa;
}

Code2 ---不起作用

function starter()
{
    var ele = document.getElementById("div1");
    fin(ele);
}
function fin(ele)
{
    for (i = 0; i <= 1; i += 0.01)
    {
        i=Math.round(i*100)/100;
        setTimeout("seto(" + ele + "," + i + ")", i * 1000);
    }
}

function seto(ele,opa)
{
    ele.style.opacity = opa;
}

推荐答案

基于此网站

EDIT-1

添加了功能，以便用户可以指定动画持续时间（@Marzian评论）


你可以试试这个：

EDIT-1
Added the functionality so that user can specify the animation duration(@Marzian comment)

You can try this:

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

  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();
}

var el = document.getElementById("div1");
fadeIn(el, 3000); //first argument is the element and second the animation duration in ms

DEMO

这篇关于纯JavaScript淡入功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！