Pure JavaScript Fade-in-Funktion

Question

Hallo Freunde Ich möchte ein div einblenden, wenn ich auf ein anderes div klicke und dafür verwende ich folgenden Code. Code1 funktioniert gut, aber ich benötige die Code2.

Ich weiß, es ist jQuery, aber ich dies erfordern

in JavaScript zu tun, kannst du mich führen, dass welche Art von Fehler, den ich tue oder was ich ändern müssen ...

Code1 - - adaequat

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 --- funktioniert nicht

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

Answer 1

Basierend auf this Website

EDIT-1
Hinzugefügt wurde die Funktionalität, so dass Benutzer kann die Animation Dauer (@Marzian Kommentar)

angeben Sie können dies versuchen:

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

Answer 2

Scheint wie Ihr Versuch, Ihr Element in eine Zeichenfolge zu konvertieren. Versuchen Sie stattdessen

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(function() { setto(ele,i); }, i * 1000); 
    } 
} 

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

, was hier der Fall ist, dass ich eine anonnymous Funktion aufrufen, wenn die Timer-Hits, und aus dieser Funktion führen Sie meine Function zu setto.

Ich hoffe, es hilft. Jonas

Answer 3

Das Problem hier ist, dass Sie die Methode "pass-a-string" verwenden, um setTimeout zu verwenden. Was ist im Grunde nur eine versteckte eval.

Es ist erwähnenswert, dass dies eine schlechte Praxis, langsame Performer und Sicherheitsrisiko ist.

(siehe Fragen wie diese: setTimeout() with string or (anonymous) function reference? speedwise)

Der Grund dies Ihr Problem verursacht, weil "seto(" + ele + "," + i + ")"-"seto('[object HTMLDivElement]', 1)" bewerten wird. Sie möchten wirklich einen Verweis auf das Objekt ele übergeben, aber der Wert wird in eine Zeichenfolge umgewandelt, wenn Sie versucht haben, ein Objekt in eine Zeichenfolge zu verketten. Sie können dies umgehen, indem Sie die set-Methode "pass-a-function" verwenden.

setTimeout(function() { seto(ele, i); }, i * 1000);

Ich glaube, so dass diese Änderung wird Ihr Code2 Verhalten entspricht Code1 machen.

Answer 4

Im Folgenden sind die vollständigen Antworten auf meine Frage

ANS1 --- DEMO

function fin() { 
    var i = 0; 
    var el = document.getElementById("div1"); 
    fadeIn(el,i); 
} 

function fadeIn(el,i) { 
    i = i + 0.01; 
    seto(el,i); 
    if (i<1){setTimeout(function(){fadeIn(el,i);}, 10);} 
} 

function seto(el,i) { 
    el.style.opacity = i; 
} 

ANS2 --- DEMO

function fin(){ 
    var i = 0; 
    var el = document.getElementById("div1"); 
    fadeIn(el,i); 
} 

function fadeIn(el,i) { 
    var go = function(i) { 
     setTimeout(function(){ seto(el,i); } , i * 1000); 
    }; 
    for (i = 0 ; i<=1 ; i = i + 0.01) go(i); 
} 

function seto(el,i) 
{ 
    el.style.opacity = i; 
} 

Answer 5

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

Answer 6

Meine Version

function fadeIn($element){ 
    $element.style.display="block"; 
    $element.style.opacity=0; 
    recurseWithDelayUp($element,0,1); 
} 
function fadeOut($element){ 
    $element.style.display="block"; 
    $element.style.opacity=1; 
    recurseWithDelayDown($element,1,0); 
} 

function recurseWithDelayDown($element,startFrom,stopAt){ 
    window.setTimeout(function(){ 
     if(startFrom > stopAt){ 
      startFrom=startFrom - 0.1; 
      recurseWithDelayDown($element,startFrom,stopAt) 
      $element.style.opacity=startFrom; 
     }else{ 
     $element.style.display="none" 
     } 
    },30); 
} 
function recurseWithDelayUp($element,startFrom,stopAt){ 
    window.setTimeout(function(){ 
     if(startFrom < stopAt){ 
      startFrom=startFrom + 0.1; 
      recurseWithDelayUp($element,startFrom,stopAt) 
      $element.style.opacity=startFrom; 
     }else{ 
     $element.style.display="block" 
     } 
    },30); 
}