Element infaden lukt niet

dinsdag 7 september 2010 22:09

Acties:

0 Henk 'm!

Topicstarter

Hallo,
Ik probeer Javascript te leren, en ik heb de volgende code geschreven om een divje in te laten faden en out te laten faden:

HTML: index.html

<!doctype html>
<head>
<title>test</title>
</head>
<body>
<div style="background-color:#FF0000;width:100px;height:100px;"></div>
<div style="background-color:#FF0000;width:100px;height:100px;"></div>
<div style="background-color:#FF0000;width:100px;height:100px;"></div>
</body>
<script src="script.js"></script>
</html>

JavaScript: script.js

var addEvent = (function() {
  if (document.addEventListener) { 
    return function(elem, event, func) {
      elem.addEventListener(event, func, false);
    }
  }
  else if(document.attachEvent) {
    return function(elem, event, func) {
      elem.attachEvent("on"+event, func);
    }
  }
})();

function fadeIn(e, duration) {
  time = duration/100;
  if(e.getAttribute("animInterval"))
    clearInterval(e.getAttribute("animInterval"));
  
  console.log("fadeInadded");
  
  animInterval = setInterval(function() {
    console.log("fadeInTerval");
    e.style.opacity += 0.01;
    if ((e.style.opacity)>=1){
      e.style.opacity = 1;
      clearInterval(e.getAttribute("animInterval"));
    }
  },time);
  e.setAttribute("animInterval", animInterval);
}

function fadeOut(e, duration) {
  time = duration/100;
  if(e.getAttribute("animInterval"))
    clearInterval(e.getAttribute("animInterval"));
  
  console.log("fadeOutadded");
  
  animInterval = setInterval(function() {
    console.log("fadeOuterval");
    e.style.opacity -= 0.01;
    if ((e.style.opacity)<=0){
      e.style.opacity = 0;
      clearInterval(e.getAttribute("animInterval"));
    }
  },time);
  e.setAttribute("animInterval", animInterval);
}


var elements = document.getElementsByTagName("div");
for(i=0;i<elements.length;i++) {
  e = elements[i];
  if (!e.style.opacity){
    e.style.opacity=1;
  }
  addEvent(e, "mouseover", function(){fadeOut(this, 100)});
  addEvent(e, "mouseout", function(){fadeIn(this, 100)});
}

Nu faden de DIVjes wel uit als ik eroverheen ga, maar als ik mijn muis eraf haal dan krijgt de opacity een waarde van 0.01 (dus hij vuurt 1x af) maar daarna gaat hij niet verder omhoog, maar op de console komt er wel een bericht van de interval

.
Ik heb echt geen idee wat er aan de hand is, dus help me alsjeblieft

.

dinsdag 7 september 2010 22:12

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

bvdbijl schreef op dinsdag 07 september 2010 @ 22:09:
Ik heb echt geen idee wat er aan de hand is, dus help me alsjeblieft .

Meten = weten. Begin dus eens met Debuggen: Hoe doe ik dat? en post je bevindingen daarvan eens

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 7 september 2010 22:16

Acties:

0 Henk 'm!

bvdbijl

Topicstarter

RobIII schreef op dinsdag 07 september 2010 @ 22:12:
[...]

Meten = weten. Begin dus eens met Debuggen: Hoe doe ik dat? en post je bevindingen daarvan eens

Ik denk dat je mijn post niet helemaal goed hebt gelezen

Zoals ik als zei, als ik mijn muis erop doe, dan zegt de console "fadeOutAdded" en daarna 100x (voor elk stapje) "fadeOuterval"
maar als ik "mouseout" dan zegt hij "fadeInAdded" en daarna gaat hij voor eeuwig door met "fadeInterval" en blijft de opacity 0.01
Goed genoeg?

In mijn eerste post was het misschien nogal onduidelijk

dinsdag 7 september 2010 22:28

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

bvdbijl schreef op dinsdag 07 september 2010 @ 22:16:
maar als ik "mouseout" dan zegt hij "fadeInAdded" en daarna gaat hij voor eeuwig door met "fadeInterval" en blijft de opacity 0.01

Ik denk dat jij mijn posts niet goed gelezen hebt. Als opacity 0.01 blijft zul je daar eens moeten gaan kijken waarom dat zo is

Kun je bijv. wel 0.01 optellen bij "0.01"?

JavaScript:

1 2	console.log("0.56" - 0.01) console.log("0.56" + 0.01)

En ga nu nog eens na waarom uit faden wel werkt en in faden niet

[ Voor 13% gewijzigd door RobIII op 07-09-2010 22:40 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 7 september 2010 22:34

Acties:

0 Henk 'm!

bvdbijl

Topicstarter

RobIII schreef op dinsdag 07 september 2010 @ 22:28:
[...]

Ik denk dat jij mijn posts niet goed gelezen hebt. Als opacity 0.01 blijf zul je daar eens moeten gaan kijken waarom dat zo is Kun je bijv. wel 0.01 optellen bij "0.01"?
JavaScript:
1
2
console.log("0.56" - 0.01)
console.log("0.56" + 0.01)
En ga nu nog eens na waarom uit faden wel werkt en in faden niet

ahhhhhh natuurlijk

-= is een int operation dus cast hij m naar int, maar += is ook een string operation dus voegt hij het gewoon toe aan het einde!
Heel erg bedankt! $_/-\o_$

EDIT: wacht, hij cast niet naar int maar naar float, klein verschil

[ Voor 5% gewijzigd door bvdbijl op 07-09-2010 22:41 ]

Onderwerpen