在回答您的实际问题之前,我为您提供了一个更合适的解决方案来解决您的褪色问题,因为您尝试做得过于复杂。
您应该只修改实际值并将其重新分配给样式,无需调用所有方法并重新查询 DOM。
function fadeIn( node, v ) {
node.style.opacity = v || 1;
if( v < 1 ) {
setTimeout( fadeIn.bind( null, node, v + 0.1 ), 25 );
}
}
function fadeOut( node, v ) {
node.style.opacity = v || 1;
if( v > 0 ) {
setTimeout( fadeOut.bind( null, node, v - 0.1 ), 25 );
}
}
这是完成任务的一种方法的一个非常基本的示例。你可以这样称呼它
fadeOut( document.getElementById("myDiv") );
让浏览器/CSS 过渡如果不需要支持带动画的旧版浏览器,则可以完成这项工作。那可能看起来像
function fadeIn( node ) {
node.style.transition = 'all 400ms ease-in';
node.style.opacity = 1;
}
function fadeOut( node ) {
node.style.transition = 'all 400ms ease-in';
node.style.opacity = 0;
}
请注意,您可能不仅仅想要设置过渡,还有所有特定的浏览器供应商前缀,例如-ms-转换, -moz-过渡等等,也适用于“不太传统”的浏览器。
要最终回答这个问题,您应该使用Array要循环多个函数,这可能看起来像
[ fade90, fade80, fade70, fade60,
fade50, fade40, fade30, fade20,
fade10, hide ].forEach(function( method, i, arr ) {
setTimeout(function() {
if( typeof arr[ i+1 ] === 'function' ) {
!i && method();
setTimeout( arr[ i+1 ], 25 * i );
}
}, 25);
});
请注意,您还应该重写这些方法,那些不应该调用setTimeout
对于他们自己来说,他们也不应该重新查询目标节点。我只是想给你举一个我的方法的例子。