javascript - 如何在innerHTML中添加jquery fadein

Question

function inside_out(folder){
    var typebox = document.getElementById("typebox");
    var Loader = document.getElementById("thumbnail_loader");
    var hr = new XMLHttpRequest();
    hr.open("POST", "json_type_data.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var d = JSON.parse(hr.responseText);
            typebox.innerHTML = "";
            for(var o in d){
                if(d[o].src){
                    //create image
                    typebox.innerHTML += "<div class='typebox'><img id='typeImg' width='30px' height='30px' src="+d[o].src+"></div>";
                }
            }
        }
    }
    hr.send("folder="+folder);
}

抱歉，我已经做了研究，但我仍然不知道如何在我的innerHTML中添加淡入淡出，请任何人给我一个线索，我的意图是当xml完成​​加载时，那些图像将会淡入。

我尝试了 jquery fadein 但我可以让它工作，我正在使用 jquery 1.9.1

Answer 1

试试这个:

function inside_out(folder) {
  var typebox = document.getElementById("typebox");
  var typeboxJQS = $('#typebox');
  var Loader = document.getElementById("thumbnail_loader");
  var hr = new XMLHttpRequest();
  hr.open("POST", "json_type_data.php", true);
  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
      var d = JSON.parse(hr.responseText);
      typebox.innerHTML = "";
      var temp = '';
      typeboxJQS.fadeOut();
      for (var o in d) {
        if (d.hasOwnProperty(o) && d[o].hasOwnProperty('src') && d[o].src !== '') {
          temp += "<div class='typebox'><img id='typeImg' width='30px' height='30px' src=" + d[o].src + "></div>";
        }
      }
      typebox.innerHTML = temp;
      typeboxJQS.fadeIn();
    }
  };
  hr.send("folder=" + folder);
}