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