动画
预定义动画
显示与隐藏
show()
方法 和 hide()
方法
$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
//speed - 表示预定速度的字符串或表示动画时长的毫秒数值
//easing - 规定切换效果
//fn - 在动画完成时执行的函数,每个元素执行一次。
滑动式动
slideUp()
和 slideDown()
没有无动画版本(底层代码预定义动画执行的时长)
作用 - 改变指定元素的高度
淡入淡出效果 - 改变元素的透明度
fadeOut()
和 fadeIn(
)
$('#box').fadeOut(3000);
$('#box').fadeIn(3000);
动画切换效果(有局限性,只有三种)
toggle([speed][, easing][, fn])
方法:如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
slideToggle([speed][, easing][, fn])
方法:通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
fadeToggle([speed][, easing][, fn]
方法:通过不透明度的变化来开关所有匹配元素的淡人和淡出效果,并在动画完成后可选地触发一个回调函数。
自定义动画
animate()
方法
$element.animate(prperties,duration,easing,complete)
properties
:css样式属性duration
:动画执行时长,以毫秒为单位easing
:一个字符串, 表示过渡使用哪种缓动函数。complete
:执行动画结束后的回调函数
并发与排队效果
-
并发:多个动画同时执行
$('#box').animate({ left: 400, top: 400 }, { duration: 300, queue: true //false为默认值 });
-
排队:多个动画按照先后顺序执行
$('#box').animate({ left: 400, }, { duration: 3000 }).animate({ top: 400 }, { duration: 3000, queue: true //用于控制当前效果为并发还是排队,false-并发;true-排队。 });
停止动画效果
stop()
方法:停止所有运行指定元素的动画
$element.animate([clearQueue][,gotoEnd])
stop()
方法没有接收参数时会立即停止执行动画
-
stop(queue)
方法第一个参数$('#js').click(function () { $('#box').stop(true);
true
- 停止当前动画,并清空队列false
- 停止当前动画,但队列中的动画继续执行
-
stop(queue)
方法第二个参数$('#js').click(function () { $('#box').stop(true,false);
true
- 停止当前动画,并将指定元素设置为动画执行结束false
- 不做处理
延迟执行动画
delay()
方法
$('#box').animate({
left: 800
}, 6000).delay(1000).animate({
top: 600
}, 3000);
animate()
方法,不支持的样式属性:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor