फंक्शन में शुद्ध जावास्क्रिप्ट फीका

Question

हाय दोस्तों मैं एक div में फीका करना चाहता हूं जब मैं किसी अन्य div पर क्लिक करता हूं और इसके लिए मैं निम्नलिखित कोड का उपयोग कर रहा हूं। कोड 1 ठीक काम करता है लेकिन मुझे कोड 2 का उपयोग करने की आवश्यकता है।

मैं जानता हूँ कि jQuery है, लेकिन मैं जावास्क्रिप्ट

में ऐसा करने की आवश्यकता होती है तुम मुझे उस गलती की किस तरह मैं कर रहा हूँ या क्या मैं बदलने की जरूरत है मार्गदर्शन कर सकते हैं ...

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

Answer 1

this साइट के आधार पर

संपादित -1
जोड़ा गया कार्यक्षमता है कि उपयोगकर्ता एनीमेशन अवधि निर्दिष्ट कर सकते हैं (@Marzian टिप्पणी)

आप इस कोशिश कर सकते हैं ताकि:

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

आपके तत्व को एक स्ट्रिंग में बदलने की कोशिश करने जैसा लगता है। प्रयास करें इस बजाय

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

यहाँ क्या होता है, कि मैं एक anonnymous फ़ंक्शन को कॉल टाइमर हिट, और कहा कि समारोह से, मेरे functioncall setto को निष्पादित करें।

उम्मीद है कि यह मदद करता है। जोनास

Answer 3

यहां समस्या यह है कि आप setTimeout का उपयोग करने के पास-ए-स्ट्रिंग विधि का उपयोग कर रहे हैं। जो मूल रूप से सिर्फ एक छिपी हुई eval है।

यह ध्यान देने योग्य है कि यह एक खराब अभ्यास, धीमी कलाकार और सुरक्षा जोखिम है।

(इस जैसे सवालों देखें: setTimeout() with string or (anonymous) function reference? speedwise)

कारण यह आपकी समस्या का कारण है क्योंकि "seto(" + ele + "," + i + ")""seto('[object HTMLDivElement]', 1)" करने का मूल्यांकन करने के लिए जा रहा है है। आप वास्तव में ele ऑब्जेक्ट का संदर्भ पास करना चाहते हैं - लेकिन जब आप किसी ऑब्जेक्ट को किसी स्ट्रिंग पर संयोजित करने का प्रयास करते हैं तो मान को स्ट्रिंग में डाला जा रहा है। आप setTImeout का उपयोग करने के पास-ए-फ़ंक्शन विधि का उपयोग करके इसे प्राप्त कर सकते हैं।

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

मैं इस परिवर्तन Code1 करने के लिए अपने Code2 व्यवहार बराबर कर देगा बनाने विश्वास।

Answer 4

नीचे --- मेरे सवाल

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

मेरे संस्करण

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