前言：
目前朋友们对“jquery表格展开收缩”都比较注意，姐妹们都需要知道一些“jquery表格展开收缩”的相关内容。那么小编也在网摘上搜集了一些对于“jquery表格展开收缩””的相关文章，希望各位老铁们能喜欢，朋友们一起来了解一下吧！概述
jQuery的动画就是通过不断改变元素的属性值来实现动画效果;了解jQuery内置动画方法,参数含义及其各自特点,运用其动画方法做出简单的动画效果
显示/隐藏/切换动画(元素宽高同步增/减)
show([speed,[easing],[fn]])/hide([speed,[easing],[fn]])/toggle([speed],[easing],[fn])
三个动画方法的参数含义类同,只以显示动画方法为例
<input type="button" value="显示" /><button>隐藏</button><input type="button" value="切换" /><div style="width:100px;height:100px;background-color:red;display:none;"></div>
1)show()显示元素
show()方法使用格式:show([speed,[easing],[fn]])(大括号表示参数可省略)
1)无参数直接显示
2)speed:指定时间内元素显示完毕(自带透明度)
三个预定义的值“slow(默认)”,"normal","fast"(时间分别为0.6s 0.4s 0.2s加上引号)或直接输入毫秒值,动画效果到时即止
3)easing:用来指定切换效果 默认是“swing”,可用参数“linear”
3.1 swing(默认):动画显示的效果是先慢中间快最后又慢
3.2 linear:动画显示速度是匀速的
4)fn():动画执行完毕后要执行的回调函数
<script src="jq/jquery-3.5.1.js"></script><script type="text/javascript"> $(function () { $('input:eq(0)').click(function () { ////1 无参数直接显示 //$('div').show();//等价于 $('div').css('display','block'); //2 speed:slow(缓慢)normal(正常)fast快速 毫秒值(指定时间) //$('div').show('slow'); //$('div').show('normal'); //$('div').show('fast'); //$('div').show(3000);//3秒时间 //3 easing: swing(慢快慢) linear(匀速) //$('div').show(3000, 'swing'); //$('div').show(3000, 'linear'); //4 fn()元素在3秒内匀速显示完毕后执行此函数 $('div').show(3000, 'linear', function () { //背景色变蓝 $('div').css('background-color','blue'); }); }); $('button').click(function () { //隐藏动画 $('div').hide(3000, 'linear', function () { $('div').css('background-color', 'red'); }); }); $('input:last').click(function () { //切换动画 $('div').toggle(3000, 'swing'); }); }); </script>元素显示
滑动的展开/收缩/切换动画(元素高度增减)
slideDown([speed],[easing],[fn])/slideUp([speed,[easing],[fn]])/slideToggle([speed],[easing],[fn]) 参数含义如上,不再赘述
$(function () { //滑动展开 $('input:eq(0)').click(function () { $('div').slideDown("slow"); }); //滑动收缩 $('button').click(function () { $('div').slideUp("slow"); }); //滑动切换 $('input:eq(1)').click(function () { $('div').slideToggle(3000); }); });淡入淡出显示/隐藏/切换/指定动画fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])/fadeToggle([speed,[easing],[fn]])
fadeTo([speed],opacity,[easing],[callback])(必须参数opacity其范围[0-1])到指定不透明度
<input type="button" value="淡入" /><button>淡出</button><input type="button" value="指定不透明度" /><input type="button" value="切换" /><div style="width:100px;height:100px;background-color:red;display:none;"></div>$(function () { //淡入 $('input:eq(0)').click(function () { $('div').fadeIn("slow"); }); //淡出 $('button').click(function () { $('div').fadeOut("slow"); }); //到指定透明度 $('input:eq(1)').click(function () { $('div').fadeTo(3000,0.6); }); //切换 $('input:eq(2)').click(function () { $('div').fadeToggle(3000); }); });改变元素不透明度到0.6
以上三种动画的特点:
1)显示/隐藏动画:管元素的宽高与不透明度逐渐增减
2)展开/收缩动画:只管元素的高度增减,没有不透明度
3)淡入/淡出动画:不管元素的宽高,只管不透明度(0透明/1不透明)
animate动画
animate(params,[speed], [fn])参数params:json对象(必须)
设置属性值是数值的有动画效果,设置如背景色有用却没有渐变效果(一直使用回调函数可以也实现)
这个动画方法之前的三种方法设置动画效果更灵活
通过动画animate()方法将之前三种动画效果全部实现
$(function () { //自定义动画 $('button').click(function () { //鼠标移入移出事件 $('div').hover( //鼠标移入 div宽高增长到200 function () { $('div').animate({ width: 200, height: 200 }, 3000, 'linear'); }, //鼠标移出 div恢复默认宽高100 function () { $('div').animate({ width: 100, height: 100 }, 3000, 'linear', function () { //div滑动展开 $('div').animate({ height: 200 }, 3000, 'linear', function () { //div滑动收缩 $('div').animate({ height: 100 }, 3000, 'linear', function () { //div淡出 $('div').animate({ opacity: 0 }, 3000, 'linear', function () { //div淡入 $('div').animate({ opacity: 1 }, 3000, 'linear', function () { //div到指定不透明度 $('div').animate({ opacity: 0.6 }, 3000, 'linear', function () { alert('div动画执行完毕'); }); }); }); }); }); }); }); }); });通过动画方法改变div属性
案例
浏览器窗口右下角悬浮一个长方形div,为div注册一个鼠标移入/移出事件,实现鼠标移入首先宽度与不透明度增加,然后高度增加,鼠标移出,高度收缩与不透明度恢复默认,然后宽度收缩
<div style="width:50px;height:100px;opacity:0.3; background-color:red;position:fixed;right:10px;bottom:100px;"></div>$(function () { $('div').mouseover(function () { $('div').animate({ width: 100, opacity: 1 }, 1000, 'linear', function () { $('div').animate({ height: 200 }, 3000, 'linear'); }) }); $('div').mouseout(function () { $('div').animate({ height: 100, }, 1000, 'linear', function () { $('div').animate({ width: 50, opacity: 0.3 }, 3000, 'linear'); }); }); });全部代码:
<!DOCTYPE html><html xmlns=";><head> <title></title></head><body> <!--<input type="button" value="淡入" /> <button>淡出</button> <input type="button" value="指定不透明度" /> <input type="button" value="切换" />--> <!--<button>自定义动画</button>--> <!--<div style="width:100px;height:100px;background-color:red;"></div>--> <div style="width:50px;height:100px;opacity:0.3; background-color:red;position:fixed;right:10px;bottom:100px;"></div> <script src="jq/jquery-3.5.1.js"></script> <script type="text/javascript"> //显示/隐藏/切换 动画 $(function () { //$('input:eq(0)').click(function () { // ////1 无参数直接显示 // //$('div').show();//等价于 $('div').css('display','block'); // //2 speed:slow(缓慢)normal(正常)fast快速 毫秒值(指定时间) // //$('div').show('slow'); // //$('div').show('normal'); // //$('div').show('fast'); // //$('div').show(3000);//3秒时间 // //3 easing: swing(慢快慢) linear(匀速) // //$('div').show(3000, 'swing'); // //$('div').show(3000, 'linear'); // //4 fn()元素在3秒内匀速显示完毕后执行此函数 // $('div').show(3000, 'linear', function () { // //背景色变蓝 // $('div').css('background-color', 'blue'); // }); //}); //$('button').click(function () { // //隐藏动画 // $('div').hide(3000, 'linear', function () { // $('div').css('background-color', 'red'); // }); //}); //$('input:last').click(function () { // //切换动画 // $('div').toggle(3000, 'swing'); //}); }); //滑动展开/收缩/切换 $(function () { ////滑动显示 //$('input:eq(0)').click(function () { // $('div').slideDown("slow"); //}); ////滑动隐藏 //$('button').click(function () { // $('div').slideUp("slow"); //}); ////滑动切换 //$('input:eq(1)').click(function () { // $('div').slideToggle(3000); //}); }); //淡入/淡出/切换 $(function () { ////淡入 //$('input:eq(0)').click(function () { // $('div').fadeIn("slow"); //}); ////淡出 //$('button').click(function () { // $('div').fadeOut("slow"); //}); ////到指定透明度 //$('input:eq(1)').click(function () { // $('div').fadeTo(3000,0.6); //}); ////切换 //$('input:eq(2)').click(function () { // $('div').fadeToggle(3000); //}); }); //自定义动画 $(function () { //自定义动画 //$('button').click(function () { // //鼠标移入移出事件 // $('div').hover( // //鼠标移入 div宽高增长到200 // function () { // $('div').animate({ width: 200, height: 200 }, 3000, 'linear'); // }, // //鼠标移出 div恢复默认宽高100 // function () { // $('div').animate({ width: 100, height: 100 }, 3000, 'linear', function () { // //div滑动展开 // $('div').animate({ height: 200 }, 3000, 'linear', function () { // //div滑动收缩 // $('div').animate({ height: 100 }, 3000, 'linear', function () { // //div淡出 // $('div').animate({ opacity: 0 }, 3000, 'linear', function () { // //div淡入 // $('div').animate({ opacity: 1 }, 3000, 'linear', function () { // //div到指定不透明度 // $('div').animate({ opacity: 0.6 }, 3000, 'linear', function () { // $('div').css('backgroundColor', 'blue'); // //alert('div动画执行完毕'); // }); // }); // }); // }); // }); // }); // }); //}); }); //例子 $(function () { $('div').mouseover(function () { $('div').animate({ width: 100, opacity: 1 }, 1000, 'linear', function () { $('div').animate({ height: 200 }, 3000, 'linear'); }) }); $('div').mouseout(function () { $('div').animate({ height: 100, }, 1000, 'linear', function () { $('div').animate({ width: 50, opacity: 0.3 }, 3000, 'linear'); }); }); }); </script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery表格展开收缩
