淡入/淡出功能不起作用

fadeIn/fadeOut functions not working

本文关键字：不起作用 功能 淡出 淡入      更新时间：2023-09-26

我正在使用纯javascript处理淡入和淡出函数，这是代码：

<script>
function fadeIn(el, ms) {
    var opacity = 1,
    interval = 50,
    gap = interval / ms;
    window.setInterval(function{ 
        opacity -= gap;
        el.style.opacity = opacity;
        if(opacity <= 0) {
            window.clearInterval(fading); 
            el.style.display = 'none';
        }
    }, interval);
}
function fadeOut(el, ms){
    var opacity = 0,
    interval = 50,
    gap = interval / ms;
    el.style.display = 'block';
    el.style.opacity = opacity;
    window.setInterval(function{ 
        opacity += gap;
        el.style.opacity = opacity;
        if(opacity >= 1) {
            window.clearInterval(fading);
        }
    }, interval);   
}
</script>

在正文部分，代码是：

<input type="button" onclick="fadeOut(this, 50);" value="hi" />

当页面加载时，它会立即给出错误"错误意外令牌("：

window.setInterval(function{

当我尝试单击输入按钮时，出现错误："找不到变量 fadeIn">

函数声明缺少括号：

setTimeout(function() {
});

请注意在function关键字后添加()。您需要对fadeIn和fadeOut中的setTimeout函数执行此操作

这是正确的代码您需要在window.setInterval(function{中编写的"匿名函数"后添加(( 

<script>
function fadeIn(el, ms) {
    var opacity = 1,
    interval = 50,
    gap = interval / ms;
    window.setInterval(function(){ 
        opacity -= gap;
        el.style.opacity = opacity;
        if(opacity <= 0) {
            window.clearInterval(fading); 
            el.style.display = 'none';
        }
    }, interval);
}
function fadeOut(el, ms){
    var opacity = 0,
    interval = 50,
    gap = interval / ms;
    el.style.display = 'block';
    el.style.opacity = opacity;
    window.setInterval(function(){ 
        opacity += gap;
        el.style.opacity = opacity;
        if(opacity >= 1) {
            window.clearInterval(fading);
        }
    }, interval);   
}
</script>
相关文章：