jQuery怎样实现简单的动画效果?(实例详解)

本篇文章我们来看一下怎样利用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怎样实现简单的动画效果?(实例详解)
浏览路径:http://myzitong.com/article/cphdgo.html