Pure JavaScript fade in function

问题:

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.

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 --- Works Fine

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 --- Does not work

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

回答1:

Based on this site

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

回答2:

var div = document.getElementById('div'); div.style.transition="opacity 1s"; div.style.opacity="0";

回答3:

Seems like your attempting to convert your element, to a string. Try this instead

function starter() {     var ele = document.getElementById("div1");     fin(ele); } function fin(ele) {     for (i = 0; i <= 1; i += 0.01)