动画效果
显示和隐藏动画
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)
})