添加过渡到隐藏/显示 javascript dom

Question

我有这个功能（还有 3 个类似的功能）

function property (){
 document.getElementById("property").style.display = "block";
 document.getElementById("hotel").style.display = "none";
 document.getElementById("other").style.display = "none";
 document.getElementById("main").style.display = "none";
 }

如何在 div 的变化中添加过渡。该函数在链接上调用。

现在它只显示被点击的 div，并隐藏其他的。但我希望旧 div 淡出，新 div 淡入..

谢谢

Answer 1

一种流行的方式是使用 jQuery：

$('#property').fadeIn();

就是这样。页面http://api.jquery.com/fadeIn/ 有一些演示。

Answer 2

用法（Demo）

fadeIn(element, 200); // ms
fadeIn("#element_id", 300);
fadeOut(element, 600, function() {
  alert("fade finished");
});

代码

function fade(dom, current, target, duration, after) {
  duration = duration || 600;
  if (typeof dom === "string")
    dom = document.getElementById(dom);
  var start = +new Date();
  var finish = start + duration;
  var easing = function (pos) {
    return (-Math.cos(pos * Math.PI) / 2) + 0.5;
  };
  var interval = setInterval(function () {
    var now = +new Date();
    var pos = now > finish ? 1 : (now - start) / duration;
    setOpacity(dom, interpolate(current, target, easing(pos)));
    if (now > finish) {
      clearInterval(interval);
      after && after();
    }
  }, 13);
}

function fadeIn(dom, duration, after) {
  fade(dom, 0, 1, duration, after);
}
function fadeOut(dom, duration, after) {
  fade(dom, 1, 0, duration, after);
}

function setOpacity(obj, value) {
  if (obj) {
    obj.style.opacity = value;
    obj.style.filter = 'alpha(opacity=' + value * 100 + ')';
    obj.style.zoom = 1;
  }
}
function interpolate(source, target, pos) {
  return (source + (target - source) * pos).toFixed(3);
}​