这篇文章主要讲解了“jQuery如何实现简单的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jQuery如何实现简单的动画效果”吧！
公司主营业务：成都做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出宝鸡免费做网站回馈大家。
jQuery 实现简单的动画
1、显示/隐藏
(1)显示：
show(speed,[callback])
speed:效果时长。可取的值：slow、fast、毫秒数
callback:过渡完成后，所执行的方法名称
(2)隐藏：
hide(speed,[callback])
(3)交替：
toggle(speed,[callback]),
若'显示'则'隐藏';
若'隐藏'则显示
示例如下：
//搭建结构
显示图片
隐藏图片
交替显示隐藏
2、向上收缩/向下展开
(1)收缩：
slidUp(speed,[callback])
(2)展开：
slidDown(speed,[callback])
(3)交替：
slidToggle(speed,[callback])
示例如下：
$('#btn_up').bind('click',function(){
$('#img2').slideUp(); //展开
})
$('#btn_down').bind('click', function () {
$('#img2').slideDown(); //收缩
})
$('#btn_slide').bind('click', function () {
$('#img2').slideToggle(); //收缩展开交替
})输出结果：
3、淡入/淡出
(1)淡入：
fadeIn(speed,[callback])
(2)淡出：
fadeOut(speed,[callback])
(3)淡入淡出交替：
fadeToggle(speed,[callback])
示例如下：
$('#btn_fadeIn').bind('click', function () {
$('#img3').fadeIn(); //淡入
})
$('#btn_fadeOut').bind('click', function () {
$('#img3').fadeOut(); //淡出
})
$('#btn_fade').bind('click', function () {
$('#img3').fadeToggle(2000); //淡入淡出交替
})
4、自定义动画
$(selector).animate(params,[speed],[easing],[fn])
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
示例如下：
$(function(){
$('button').click(function(){
$('.bt').animate({
left:200,
top:150,
opacity:0.4
},1000)
})
})输出结果：
感谢各位的阅读，以上就是“jQuery如何实现简单的动画效果”的内容了，经过本文的学习后，相信大家对jQuery如何实现简单的动画效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
本文标题：jQuery如何实现简单的动画效果
浏览路径：
http://bjjierui.cn/article/jhdpde.html
