jQuery动画

1.显示 隐藏

hide() show()

$('#hide').click(function () {
	$('#box').hide();
})
$('#show').click(function () {
	$('#box').show();
})

使用toggle()方法切换hide() show()

$('#toggle').click(function () {
	$('#box').toggle()
})

2.淡入淡出

fadeIn() fadeOut()

$("#fadeIn").click(function () {
	$("#box").fadeIn()
})
$("#fadeOut").click(function () {
	$("#box").fadeOut()
})

使用fadeToggle()方法切换fadeIn() fadeOut()

$("#fadeToggle").click(function () {
	$("#box").fadeToggle()
})

3.上滑 下滑

slideDown() slideUp()

$('#slideDown').click(function () {
	$('#box').slideDown()
})
$('#slideUp').click(function () {
	$('#box').slideUp()
})

slideToggle()可以在slideDown()与slideUp()之间切换

$("#slideToggle").click(function () {
	$("#box").slideToggle()
})

4.animate

animate()方法用于创建自定义动画 不能设置颜色

$('#animate').click(function () {
	$('#small').animate({
		left: '100px'
	}, 3000)
})

5.stop

stop()用于停止动画或效果

$('#stop').click(function () {
	$('#small').stop();
})