jQuery效果之隐藏与显示、淡入淡出、滑动、回调
2017-06-17 10:03
751 查看
1. 隐藏与显示
通过 jQuery,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,可以使用 toggle() 方法来切换 hide() 和 show() 方法。语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script> for(var i=0;i<5;i++){ $("<div>").appendTo(document.body); } $("div").click(function () { $(this).hide(2000,function () { $(this).remove(); }); }); </script>
2. 淡入淡出
jQuery 拥有下面四种 fade 方法:fadeIn()-用于淡入已隐藏的元素。
fadeOut()-用于淡出可见元素。
fadeToggle()-可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeTo()-允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fade.html
<button id="in">fadeIn</button> <button id="out">fadeOut</button> <button id="toggle">fadeToggle</button> <button id="to">fadeTo</button> <div id="div1" style="width: 80px;height: 80px;display:none;background-color: aqua"></div> <div id="div2" style="width: 80px;height: 80px;display:none;background-color: chartreuse"></div> <div id="div3" style="width: 80px;height: 80px;display:none;background-color: coral"></div>
fade.js
$(document).ready(function () { $("#in").on("click",function () { $("#div1").fadeIn(1000); $("#div2").fadeIn(1000); $("#div3").fadeIn(1000); }) ; $("#out").on("click",function () { $("#div1").fadeOut(1000); $("#div2").fadeOut(1000); $("#div3").fadeOut(1000); }) ; $("#toggle").on("click",function () { $("#div1").fadeToggle(1000); $("#div2").fadeToggle(1000); $("#div3").fadeToggle(1000); }) ; $("#to").on("click",function () { $("#div1").fadeTo(1000,0.5); $("#div2").fadeTo(1000,0.7); $("#div3").fadeTo(1000,0.3);//表示透明度,从0~1,0表示完全透明,1表示完全不透明 }) ; });
3. 滑动
通过 jQuery,可以在元素上创建滑动效果。jQuery 拥有以下滑动方法:
slideDown()-向下滑动元素。
slideUp()-向上滑动元素。
slideToggle()-可以在 slideDown() 与 slideUp() 方法之间进行切换。
语法:
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script src="move.js"></script> <style> #content,#flipshow,#fliphide,#fliptoggle{ padding:5px; text-align: center; background-color: aqua; border:solid 1px #ccffdd; } #content{ padding:50px; display:none; } </style> </head> <body> <div id="flipshow">出现</div> <div id="fliphide">隐藏</div> <div id="fliptoggle">出现/隐藏</div> <div id="content">hi</div> </body>
$(document).ready(function () { $("#flipshow").click(function () { $("#content").slideDown(1000); }); $("#fliphide").click(function () { $("#content").slideUp(1000); }); $("#fliptoggle").click(function () { $("#content").slideToggle(1000); }); });
4. 回调
当动画 100% 完成后,即调用 Callback 函数。<button>隐藏</button> <p>hi hi hi hi hi hi hi</p>
$("button").click(function () { // $("p").hide(1000,function () { // alert("动画结束,这个方法被回调") // }); $("p").css("color","red").slideUp(1000).slideDown(1000);//同时使用多个动画 }) ;
参考资料
javascript callback函数的理解与使用
相关文章推荐
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
- Jquery—效果(隐藏、显示、切换,滑动,淡入淡出及动画)
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
- jQuery来了--效果--隐藏和显示,淡入淡出,滑动
- jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
- jQuery之动画效果(动画基础隐藏和显示,上卷下拉效果 ,淡入淡出效果 ,动画切换的比较,自定义动画,jQuery核心)
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- jQuery 隐藏、显示、淡入淡出、滑动
- JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果:slideUp)
- jQuery效果显示隐藏淡入淡出
- jquery隐藏、显示、切换,滑动,淡入淡出,以及动画
- jQuery 之 隐藏显示与淡入淡出效果(三)
- jquery菜单滑动及显示隐藏效果
- JQuery 动画显示和隐藏效果
- jQuery插件:toggleElements.js,隐藏/显示层的折叠效果插件
- jquery-显示效果-淡入淡出(二)
- jQuery学习(四) 效果——隐藏/显示
- 【js与jquery】左侧导航模块的显示与隐藏效果