jQuery--动画效果

动画效果

显示和隐藏动画

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) })