问:如何使每个div单独消失?

Question

所以我有一个JSON对象，我必须让每个div淡出他们的年龄。

代码到目前为止!

JS

var osobe;
getText = function(url, callback) // How can I use this callback?
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); // Another callback here
        }
    }; 
    request.open('GET', url,true);
    request.send();
}
function mycallback(data) {
   osobe = JSON.parse(data).people;
  anim();
}
getText('http://output.jsbin.com/vawamasaci.json', mycallback);

function anim() {
  var container = document.createElement('div');
  container.id = 'container';
  document.getElementsByTagName('body')[0].appendChild(container);
  for(var key in osobe) {
    var div = document.createElement('div');
    div.innerHTML = osobe[key].name + "<br />";
    div.innerHTML = div.innerHTML + osobe[key].sex;
    div.style.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    var dob_split = osobe[key].dob.split("-");
    var yearOfBirth = dob_split[2];
    var age = new Date().getFullYear() - yearOfBirth;
    animBox(div, age);
    document.getElementById('container').appendChild(div);
  }
  function animBox(div, age){
    var int = setInterval(function() {
      var opacity = div.style.opacity;
      if(opacity != "0") {     
        div.style.opacity = opacity ? (parseFloat(opacity) - 0.1) : 1;
      }
   }, 1000);
   setTimeout(function(){ 
      clearInterval(int);
   }, age * 1000);
  }
}

CSS

#container div {
  width: 100px;
  height: 100px;
  float:left;
}

Answer 1

  function animBox(div, age){
   setTimeout(function(){ 
         var int = setInterval(function() {
      var opacity = div.style.opacity;
      if(opacity != "0") {     
        div.style.opacity = opacity ? (parseFloat(opacity) - 0.1) : 1;
      }
     }, 100);
   }, age * 100);
  }

}

希望对你有帮助