点击元素使其在毫秒内从不透明变为透明_点击事件让td的透明度为空-优快云博客

本文链接：https://blog.youkuaiyun.com/slash1993/article/details/51541034

本文介绍了一个结合CSS样式和JavaScript实现的简单动画效果案例。通过定义圆角矩形块，并利用JavaScript控制其透明度变化，实现了点击后元素逐渐淡出的效果。此示例展示了如何设置基本的HTML结构、CSS样式以及JavaScript交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #ul1 li{
            width: 250px;
            height: 250px;
            border: 1px solid #cccccc;
            -moz-border-radius: 20px;      /* Gecko browsers */
            -webkit-border-radius: 20px;   /* Webkit browsers */
            border-radius:20px;
            float: left;
            list-style: none;
            margin: 10px;

        }
    </style>
    <script>
        window.onload = function(){
            //第一个参数为元素e
            //第二个参数是函数，以e为参数，它将在动画结束时调用
            //第三个参数是time，默认为500毫秒
            function fadeOut(e,oncomplete,time){
                if(e === "string") document.getElementById = 'e';
                if(!time) time = 500;
                //使用Math.sqrt 作为一个简单的“缓动函数”来创建动画
                  //精巧的非线性：一开始淡出的比较快，然后缓慢一些
                  var ease = Math.sqrt;
                var start = (new Date()).getTime();
                animate();

                function animate(){

                    var elapsed = (new Date()).getTime() - start;
                    var fraction = elapsed/time;

                    if(fraction<1){
                        var opacity = 1-ease(fraction);
                        e.style.opacity = String(opacity);
                        //在25毫秒后或者在总时间的最后尝试再次运行函数
                        //目的是为了产生每秒40帧的动画
                        setTimeout(animate,Math.min(25,time-elapsed));
                    }else{
                        e.style.opacity = "0";                  //使e完全透明
                          if(oncomplete) oncomplete(e);           //调用完成后的回调函数 
                    }
                }
            }

            var oUl = document.getElementById('ul1');
            var aLi = oUl.children;

            var arr = ['black','#cccccc','#336666','khaki','#0099cc'];

            for(var i =0;i<aLi.length;i++){
                aLi[i].index = i;
                aLi[i].style.background = arr[i%arr.length];
                aLi[i].onclick = function(){
                    fadeOut(aLi[this.index])
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li id="li1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        #ul1 li{            width: 250px;            height: 250px;            border: 1px solid #cccccc;            -moz-border-radius: 20px;      /* Gecko browsers */            -webkit-border-radius: 20px;   /* Webkit browsers */            border-radius:20px;            float: left;            list-style: none;            margin: 10px;        }    </style>    <script>        window.onload = function(){            //第一个参数为元素e            //第二个参数是函数，以e为参数，它将在动画结束时调用            //第三个参数是time，默认为500毫秒            function fadeOut(e,oncomplete,time){                if(e === "string") document.getElementById = 'e';                if(!time) time = 500;                //使用Math.sqrt 作为一个简单的“缓动函数”来创建动画                  //精巧的非线性：一开始淡出的比较快，然后缓慢一些                  var ease = Math.sqrt;                var start = (new Date()).getTime();                animate();                function animate(){                    var elapsed = (new Date()).getTime() - start;                    var fraction = elapsed/time;                    if(fraction<1){                        var opacity = 1-ease(fraction);                        e.style.opacity = String(opacity);                        //在25毫秒后或者在总时间的最后尝试再次运行函数                        //目的是为了产生每秒40帧的动画                        setTimeout(animate,Math.min(25,time-elapsed));                    }else{                        e.style.opacity = "0";                  //使e完全透明                          if(oncomplete) oncomplete(e);           //调用完成后的回调函数                     }                }            }            var oUl = document.getElementById('ul1');            var aLi = oUl.children;            var arr = ['black','#cccccc','#336666','khaki','#0099cc'];            for(var i =0;i<aLi.length;i++){                aLi[i].index = i;                aLi[i].style.background = arr[i%arr.length];                aLi[i].onclick = function(){                    fadeOut(aLi[this.index])                }            }        }    </script></head><body>    <ul id="ul1">        <li id="li1"></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body></html>