小编给大家分享一下jQuery中实现动画效果的方法有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
jQuery中的动画效果有:slideDown,slideUp等实现滑动效果;fadeIn,fadeToggle等实现淡入淡出的效果
jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果,而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁。
滑动效果
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中实现动画效果的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。