Question

我正在使用此功能打开和关闭元素onclick。如何在不使用jQuery的情况下添加一些淡入淡出效果？

function toggle_visibility(){
  for(var i = 0,len = arguments.length;i < len;i++){
    var e = document.getElementById(arguments[i]).style,d = e.display;
    e.display = (d == "block") ? "none" : "block";
  }
}

Answer 1

您可以使用css3过渡和不透明度来执行此操作

#block {
    transition: opacity 1s ease-in-out;
}

.out { opacity: 0; }
.in { opacity: 1; }

然后使用out或在类中隐藏或显示元素

Answer 2

您可以编写自己的函数：

var toggleFade = function(element, time, callback) {
    var timeStep = 50;
    var step = timeStep / time;
    var toValue = 1;
    if (element.style.display != 'none') {
        step = -step;
        toValue = 0;
        element.style.opacity = element.style.opacity || 1;        
    } else {
        element.style.opacity = element.style.opacity || 0;  
        element.style.display = 'block';        
    }

    var interval = setInterval(function() {
        var newVal = +element.style.opacity + step;

        if (newVal < 0 && step < 0) {
            clearInterval(interval);
            element.style.opacity = 0;
            element.style.display = 'none'
            callback && callback();
        } else if (newVal > 1 && step > 0) {
            clearInterval(interval);
            element.style.opacity = 1;
            callback && callback();
        } else
            element.style.opacity = newVal;
    }, timeStep);
}

Demo

淡出没有jQuery

2 个答案: