• jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()


    fadeIn(),fadeOut(),fadeToggle(),fadeTo()

    fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来)。
    语法:$(selector).fadeIn(speed,callback);
    可选的 speed 参数规定效果的时长,可以是:"slow"、"fast" 或毫秒。
    可选的 callback 参数是 该fadeIn()完成后所执行的函数名称。
     
    fadeOut()----淡出可见的元素(把可见的被选元素渐渐隐藏起来)。
    语法:$(selector).fadeOut(speed,callback);
    speed和callback同上。
     
    fadeToggle()----可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    语法:$(selector).fadeToggle(speed,callback);
    speed和callback同上。
     
    fadeTo()-----允许渐变为给定的不透明度(值介于 0 与 1 之间)。
    语法:$(selector).fadeTo(speed,opacity,callback);
    speed是必需的,该参数规定效果的时长,可以是:"slow"、"fast" 或毫秒。
    opacity是必需的,该 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间),越小越透明,0是完全透明(看不见),1是不透明。
    callback同上。
     
    <html>
    <head>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
    
    $("button#d").mousedown(function(){
    $("button#d").css("color","red");
    $("p#a").fadeOut("fast");
    $("p#b").fadeOut("slow");
    $("p#c").fadeOut(2000);
    });
    $("button#d").mouseup(function(){
    $("button#d").css("color","black");
    });
    $("button#e").mousedown(function(){
    $("button#e").css("color","red");
    $("p#a").fadeIn("fast");
    $("p#b").fadeIn("slow");
    $("p#c").fadeIn(2000);
    });
    $("button#e").mouseup(function(){
    $("button#e").css("color","black");
    });
    $("button#f").mousedown(function(){
    $("button#f").css("color","red");
    $("p#a").fadeToggle("fast");
    $("p#b").fadeToggle("slow");
    $("p#c").fadeToggle(2000);
    });
    $("button#f").mouseup(function(){
    $("button#f").css("color","black");
    });
    $("button#g").mousedown(function(){
    $("button#g").css("color","red");
    $("p#a").fadeTo("fast",0.8);
    $("p#b").fadeTo("slow",0.5);
    $("p#c").fadeTo(2000,0.2);
    });
    $("button#g").mouseup(function(){
    $("button#g").css("color","black");
    });
    });
    </script>
    </head>
    <body>
    <div style="border:1px solid;border-color:red;150px;height:216px;">
    <div style="border:1px solid;border-color:white;height:70px;">
    <p id="a"style="font-size:20px;color:red;">这是第一段</p>
    </div>
    <div style="border:1px solid;border-color:white;height:70px;">
    <p  id="b"style="font-size:20px;color:blue;">这是第二段</p>
    </div>
    <div style="border:1px solid;border-color:white;height:70px;">
    <p  id="c"style="font-size:20px;color:green;">这是第三段</p>
    </div>
    </div>
    <button  id="d">fadeOut</button><br/>
    <button  id="e">fadeIn</button><br/>
    <button  id="f">fadeToggle</button><br/>
    <button  id="g">fadeTo</button><br/>
    </body>
    </html>

    效果:

    fadeToggle(),Toggle(),slideToggle(),fadeTo()

           fadeToggle()切换fadeOut()和fadeIn()这两种模式。当被选元素是隐藏的状态时,fadeToggle()触发时会淡入显示被选元素,此时和fadeIn()一样;当被选元素是显示状态时,fadeToggle()触发时会淡出隐藏被选元素,此时和fadeOut()一样。
           Toggle()切换show()和hide()这两种模式。当被选元素是隐藏的状态时,Toggle()触发时会显示被选元素,此时和show()一样;当被选元素是显示状态时,Toggle()触发时会隐藏被选元素,此时和hide()一样。
           slideToggle()切换slideDown()和slideUp()这两种模式。当被选元素是隐藏的状态时,slideToggle()触发时会滑动显示被选元素,此时和slideDown()一样;当被选元素是显示状态时,slideToggle()触发时会滑动隐藏被选元素,此时和slideUp一样。
           fadeTo()要设置被选元素的不透明度(0~1),0的时候是完全透明即隐藏,1的时候是完全不透明即正常的显示状态,在0和1之间的话越大越不透明,越小越透明。
           fadeToggle()、Toggle()和slideToggle()都是用来隐藏或者显示被选元素的,只不过隐藏或显示的效果过程不一样。fadeToggle()是通过淡入/淡出效果来显示/隐藏被选元素,Toggle()是直接隐藏或显示被选元素,slideToggle()是通过滑动效果来隐藏或者显示被选元素。fadeTo()可以通过不透明度来隐藏和显示被选元素。
  • 相关阅读:
    atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功
    atitit。win7 win8 win9 win10 win11 新特性总结与战略规划
    atitit.提升兼容性最佳实践 o9o
    atitit.attilax.com产品 软件项目通用框架类库总结
    atitit. 文件上传带进度条 atiUP 设计 java c# php
    atitit.窗体静听esc退出本窗体java swing c# .net php
    atitit.提升研发管理的利器---重型框架 框架 类库的区别
    atitit.导出excel的设计----查询结果 导出为excel的实现java .net php 总结
    atitit. java跟php的比较..为什么大企业喜欢java 而不是php
    atitit. java jsoup html table的读取解析 总结
  • 原文地址:https://www.cnblogs.com/pzw23/p/10352946.html
Copyright © 2020-2023  润新知