首页 > 其他分享> 文章详细

jQuery中的动画效果(淡入淡出)

2020-05-17 10:02:10 阅读：358 来源： 互联网

标签：jQuery 动画淡入淡出 function fadeOut fadeIn div speed click

1.定义和用法

　　jQuery 拥有下面四种 fade 方法：

　　　　fadeIn()：用于淡入已隐藏的元素

　　　　　　语法：$(selector).fadeIn(speed,callback);

　　　　fadeOut()：用于淡出可见元素。

　　　　　　语法：$(selector).fadeOut(speed,callback);

　　　　fadeToggle()：可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

　　　　　　语法：$(selector).fadeToggle(speed,callback);

　　　　fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）。

　　　　　　语法：$(selector).fadeTo(speed,opacity,callback);

　　示例：

<body>
    <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
    </div>
    <button id="btn1">fadeIn</button>
    <button id="btn2">fadeOut</button>
    <button id="btn3">fadeToggle</button>
    <button id="btn4">fadeTo</button>
    
    <script type="text/javascript">
        $(document).ready(function(){
            var $div = $("#box1")
            // 淡入
            $("#btn1").click(function(){
                $div.fadeIn("1000",function(){
                    console.log("淡入")
                })
            })
            // 淡出
            $("#btn2").click(function(){
                $div.fadeOut("1000",function(){
                    console.log("淡出")
                })
            })
            // 一个按钮实现显示隐藏
            $("#btn3").click(function(){
                $div.fadeToggle("1000",function(){
                    console.log("自动切换")
                })
            })
            // 渐变为给定的不透明度
            $("#btn4").click(function(){
                $div.fadeTo("1000",0.2,function(){
                    console.log("修改透明底")
                })
            })
        })
    </script>
</body>

　　输出：

标签：jQuery,动画,淡入淡出,function,fadeOut,fadeIn,div,speed,click
来源： https://www.cnblogs.com/abner-pan/p/12904036.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery中的动画效果(淡入淡出)

1.定义和用法