What is the problem in this code (setTimeout function Does not work)

JavaScript
1

[FONT=Arial]Hello everybody
I need your help in this problem

At first, this is the code used[/FONT]

HTML Code


<input  type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div><br />
<input  type="text" onfocus="fadeIn(this)" /><div class="box" style="opacity: 0.0"></div>


JavaScript Code


function fadeIn(elem){
      element = elem.nextSibling;
      elemOpacity = element.style.opacity;
      element.innerHTML = elemOpacity;
      if (elemOpacity < 1.0) 
            element.style.opacity = parseFloat(elemOpacity) + 0.1;
      timeIn = setTimeout(fadeIn, 100);
}

[FONT=Arial]

I have used the opacity property to make fading element [/FONT]like fadeIn() function in jquery , and i have used onfocus event to execute the code .
Problem exists in setTimeout [FONT=Arial]function, this function Does not work But the code works without this function

[/FONT] What is the cause of the problem , Please help me

2

Sometimes the content of the inner function can be quite complex, so when you revisit the code later on, it can be tricky to determine the reason for why this design of code has been done. By calling the outer function with the variable(s) that you need to retain, that helps to inform you about why such a technique is used.

It also means that the inner function is not relying on an assumption that the variables that it requires will be available at some higher scoped level. Instead, you are explicitly making sure that the requirements for the inner function are provided, which is a better type of coding technique to apply.

3

When the setTimeout calls fadeIn() it is doing so without passing a value for elem.

4

thank Mr pmw57 for Help

5

You can pass the value to an anonymous function, which then returns an inner function (which remembers the passed value) which properly calls fadein


timeIn = setTimeout(function () {
    return function () {
        fadeIn(elem);
    };
}(elem), 100);
6

i have try to add elem with setTimeout function and without elem but also doesn’t work fine

7

Hi,
just an other way
http://www.sitepoint.com/forums/showthread.php?t=513303&highlight=fade

Bye.

8

Thank You very much Mr pmw57 for solution
And i have found the solution that you typed is the easiest solution I have seen so far .
The code that you typed easy to understand But there is a point in the code not understood


timeIn = setTimeout(function () {
    return function () {
        [COLOR=Blue]fadeIn(elem)[/COLOR];
    };
}[COLOR=Red](elem)[/COLOR], 100);

Why do you add COLOR=Red[/COLOR] argument again in this place , While you have added previously fadeIn(elem) .
This point, I did not understand well I hope to clarify more