jQuery动画基础讲解(教你玩转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)
})