时间:2021-07-01 10:21:17 帮助过:7人阅读
jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果,而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁,今天将在文章中详细和大家介绍几种jQuery动画操作的方法,希望对大家的学习有一定的帮助。
【推荐课程:jQuery动画】
滑动效果
slideDown()
可以通过高度变化从下往上增大,并且以滑动的方式显示隐藏的内容
$(".btn2").click(function(){ $("p").slideDown(); });
slideUp()
可以通过高度变化从上往下减小
$("p").slideUp("slow");
slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性
例:快速将段落滑上或滑下,之后弹出一个对话框
$("p").slideToggle("fast",function(){ alert("hello world!")
淡入淡出
fadeIn()
通过设置不透明度的变化来实现所有匹配元素的淡入效果
例:用200毫秒快速将段落淡入,之后弹出一个对话框
("p").fadeIn("fast",function(){ alert("hello world!"); });
fadeOut()
通过设置不透明度的变化来实现所有匹配元素的淡出效果
例:用200毫秒快速将段落淡出,之后弹出一个对话框
$("p").fadeOut("fast",function(){ alert("hello world!"); });
fadeTo()
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){ alert("hello world!"); });
fadeToggle()
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
例:用200毫秒快速将段落淡入,之后弹出一个对话框
$("p").fadeToggle("fast",function(){ alert("hello world!"); });
案例:当我们鼠标点击按钮时隐藏的内容显示,并且淡出消失
<body> <div id="box"> <div id="btn">点击这里,显示或隐藏</div> <div id="content">jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)</div> </div> <script src="jquery/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $("#content").slideToggle("slow"); $("#content").fadeToggle("slow"); }); }); </script>
未加效果前
添加效果后
总结:以上就是本篇文章的全部内容了。希望通过本篇文章能够让大家对jQuery的动画效果有一定的了解以及如何去制作我们想要的动画效果。
以上就是jQuery中的动画效果有哪些的详细内容,更多请关注Gxl网其它相关文章!