Why doesn't this work??

**shachi** · 12-25-2006, 12:26 PM

Can anyone tell me why this doesn't work??

Code:

var Effect = {
  interval : 40,
  opacs : ["0",".1",".2",".3",".4",".5",".6",".7",".8",".9","1"],

  fadein: function(elid) {
      elid.style.opacity = '0';
      elid.style.display = 'block';
      var opacs = this.opacs;
      for(var i = 0; i < 11; i++) {
          setTimeout(function(i) { elid.style.opacity = opacs[i] },i*this.interval);
      }
  },

  fadeout: function(elid) {
      var opacs = this.opacs;
          opacs.reverse();
      for(var i = 0; i < 11; i++) {
          setTimeout(function(i) { elid.style.opacity = opacs[i]; },i*this.interval);
      }
      setTimeout(elid.style.display = 'none',i*this.interval);
  }
}

I used it something like this:

Code:

<div id="link" onclick="Effect.fadeout(this)">Fade me out</div>

Thank you for your time reading this post, Merry Christmas!

**shachi** · 12-26-2006, 11:03 AM

And why doesn't this work either??

Code:

<html>
<head>
<title>Smooth Move</title>
<script type="text/javascript">
function showLogReg(){
var logregdiv = document.getElementById("logreg");
var defaultTop = parseInt(logregdiv.offsetTop);
if(defaultTop < 100){
logregdiv.style.top = (defaultTop + 3) + "px";
}
setTimeout('showLogReg();', 10);
}

function hideLogReg(){
var logregdiv = document.getElementById("logreg");
logregdiv.style.top = logregdiv.offsetTop;
logregdiv.style.top = parseInt(logregdiv.style.top) - 3 + "px";
setTimeout('hideLogReg();', 20);
}
</script>
</head>
<body>
<div id="logreg" style="width: 100px;height: 100px;border: 1px solid red;position: absolute;" onclick="showLogReg();" ondblclick="hideLogReg();">
</div>
</body>
</html>

Please can anyone help me??

**Twey** · 12-26-2006, 09:15 PM

Read about closures and note that you aren't using them in the second example.

**shachi** · 12-28-2006, 12:17 PM

Twey: I am extremely sorry but I don't think I found out a way to solve this(I understood what closures are but I just don't have any idea how I can apply them in this). So, any clue(just a clue, I want to learn practical uses of closures too).
Thanks a lot.(By the way I've solved the second problem{I just cleared the timeouts}).

**Twey** · 12-28-2006, 09:43 PM

Code:

          setTimeout(function(i) { elid.style.opacity = opacs[i] },i*this.interval);

i isn't passed by setTimeout(). When the function is called, it's called with no arguments.

**shachi** · 12-30-2006, 02:30 PM

Twey: I tried to solve it and failed but when I tried this, it seemed to work(partially).

Code:

<html>
<head>
<script type="text/javascript">
var Effect = {
  interval : 40,
  opacs : ["0",".1",".2",".3",".4",".5",".6",".7",".8",".9","1"],

  fadein: function(elid) {
      elid.style.opacity = '0';
      elid.style.display = 'block';
      var opacs = this.opacs;
      for(var i = 0; i < 11; i++) {
          setTimeout(function(i) { elid.style.opacity = opacs[i] },i*this.interval);
      }
  },

  fadeout: function(elid) {
      var opacs = this.opacs;
          opacs.reverse();
      for(var i = 0; i < 11; i++) {
          setTimeout(function(i) { elid.style.opacity = opacs[i]; },i*this.interval);
      }
      setTimeout(elid.style.display = '"none"',i*this.interval);
  }
}
</script>
</head>
<body>
<div id="link" onclick="Effect.fadeout(this)">Fade me out</div>
</body>
</html>

**Twey** · 12-30-2006, 03:04 PM

It certainly shouldn't. i is still undefined within that function. I suspect you mean to do something like:

Code:

  fadein: function(elid) {
      elid.style.opacity = '0';
      elid.style.display = 'block';
      var opacs = this.opacs;
      for(var i = 0; i < opacs.length; i++) {
          setTimeout(
              (function() {
                  var i = i,  // save the current value of i
                              // (to avoid the problem mentioned
                              // in the link above)
                      el = elid;  // save a local reference to the
                                  // element, which can safely be
                                  // removed
                  return (function() {
                      el.style.opacity = opacs[i]; // use el, not elid.
                                                   // By the time this is
                                                   // called, elid has been
                                                   // set to null.
                      el = null;
                  });
              })(),
              i * this.interval
          );
      }
      elid = null;   // remove the original reference to the element,
                     // to avoid a memory leak in IE.  All the functions
                     // now have their own copy, and they will destroy
                     // those too when they've finished with them.
  },

**shachi** · 01-04-2007, 08:50 PM

I guess I'll have to re-read about colsures. Sorry for the late reply though and thanks a lot.

**shachi** · 01-06-2007, 03:07 PM

I wonder why closures are so confusing.

Thread: Why doesn't this work??

Thread Tools

Search Thread

Why doesn't this work??

Bookmarks

Bookmarks

Posting Permissions