jQuery动画基础讲解(教你玩转jQuery动画)

文章目录

• 动画效果
• 显示和隐藏动画
• 展开和收入动画
• 淡入淡出动画
• 自定义动画
• stop和delay方法
• stop()方法
• delay()方法

动画效果

显示和隐藏动画

show()

hide()

$(function () {// 编写jQuery相关代码$(\"button\").eq(0).click(function () {// $(\"div\").css(\"display\", \"block\")// 注意: 这里的时间是毫秒$(\"div\").show(1000, function () {// 作用: 动画执行完毕之后调用alert(\"显示动画执行完毕\")})})$(\"button\").eq(1).click(function () {// $(\"div\").css(\"display\", \"none\")$(\"div\").hide(1000, function () {alert(\"隐藏动画执行完毕\")})})$(\"button\").eq(2).click(function () {$(\"div\").toggle(1000, function () {alert(\"切换动画执行完毕\")})})})

展开和收入动画

slideDown()

slideUp()

$(function () {// 编写jQuery相关代码$(\"button\").eq(0).click(function () {$(\"div\").slideDown(1000, function () {alert(\"展开完毕\")})})$(\"button\").eq(1).click(function () {$(\"div\").slideUp(1000, function () {alert(\"收起完毕\")})})$(\"button\").eq(2).click(function () {$(\"div\").slideToggle(1000, function () {alert(\"收起完毕\")})})})

淡入淡出动画

fadeIn()

fadeOut()

fadeTo

$(function () {// 编写jQuery相关代码$(\"button\").eq(0).click(function () {$(\"div\").fadeIn(1000, function () {alert(\"淡入完毕\")})})$(\"button\").eq(1).click(function () {$(\"div\").fadeOut(1000, function () {alert(\"淡出完毕\")})})$(\"button\").eq(2).click(function () {$(\"div\").fadeToggle(1000, function () {alert(\"切换完毕\")})})$(\"button\").eq(3).click(function () {$(\"div\").fadeTo(1000, 0.2, function () {alert(\"淡入完毕\")})})})

自定义动画

animate()

• 第一个参数: 接收一个对象, 可以在对象中修改属性
• 第二个参数: 指定动画时长
• 第三个参数: 指定动画节奏, 默认就是swing
• 第四个参数: 动画执行完毕之后的回调函数

$(function () {// 编写jQuery相关代码$(\"button\").eq(0).click(function () {$(\".one\").animate({width: 500}, 1000, function () {alert(\"自定义动画执行完毕\")})$(\".one\").animate({marginLeft: 500}, 5000, function () {// alert(\"自定义动画执行完毕\")})$(\".two\").animate({marginLeft: 500}, 5000, \"linear\", function () {// alert(\"自定义动画执行完毕\");})})$(\"button\").eq(1).click(function () {$(\".one\").animate({width: \"+=100\"}, 1000, function () {alert(\"自定义动画执行完毕\");})})$(\"button\").eq(2).click(function () {$(\".one\").animate({// width: \"hide\"width: \"toggle\"}, 1000, function () {alert(\"自定义动画执行完毕\")})})})

stop和delay方法

stop()

delay()

stop()方法

• 立即停止当前动画, 继续执行后续的动画

$(\"div\").stop()$(\"div\").stop(false)$(\"div\").stop(false, false)

• 立即停止当前和后续所有的动画

$(\"div\").stop(true)$(\"div\").stop(true, false)

• 立即完成当前的, 继续执行后续动画

$(\"div\").stop(false, true)

• 立即完成当前的, 并且停止后续所有的

$(\"div\").stop(true, true)

delay()方法

用于告诉系统延迟时长

$(function(){$(\".one\").animate({width: 500// height: 500}, 1000).delay(2000).animate({height: 500}, 1000)})