动画animate(params , speed , callback)

animate(params , speed , callback)

1、params：包含样式属性值及值的映射，如{color：“red”，width：“400px”，height：“400px”}

2、speed：速度参数，可选

3、callback：在动画完成时执行的参数，可选

****需要注意的是，为了能让元素动起来，需要把元素的position设置成“relative”或“absolute”****

$(function() {
	$('div').bind("click", function() {
		$(this).animate({
			color : "red",
			width : "400px",
			height : "400px"
		}, 4000);
	})
})

方法名	说明
hide()和show()	同时修改多个样式属性即高度height、宽度width和不透明度opacity
fadeIn()和fadeOut()	只改变不透明度opacity
slideUp()和slideDown()	只改变高度height
fadeTo()	只改变不透明度opacity
toggle()	用来代替hide()和show()
slideToggle()	用来代替slideUp()和slideDown()
fadeToggle()	用来代替fadeIn()和fadeOut()
animate()	自定义动画

********************************1、动画的回调函数callback实现动画完成后要做的事情****************************

同一元素可以有多重动画效果，写成链式，如：要实现点击div时，让它向右移动的同时宽度增大到400px，并将不透明度变成100%，然后，再让它向下移动的同时高度增大到400px，这期间边框变成红色，代码如下：

$(function() {
	$('div').bind("click", function() {
		$(this).animate({
			left : "400px",
			width : "400px",
			opacity : "1"
		}, 4000).animate({
			top : "200px",
			height : "400px"
		}, 4000).css("border", "1px solid red");
	})
})

如果想实现在最后一步的时候，边框变成红色，需要把css写在最后一个动画的回调函数里，因为css不会加入到动画队列中区，而是被立即执行，解决方案如下：

$(function() {
	$('div').bind("click", function() {
		$(this).animate({
			left : "400px",
			width : "400px",
			opacity : "1"
		}, 4000).animate({
			top : "200px",
			height : "400px"
		}, 4000, function() {
			$(this).css("border", "1px solid red");
		})
	})
})

******************************************************2、停止元素的动画**************************************************

stop( [ clearQueue ] , [ gotoEnd ] );

1、clearQueue：可选，boolean类型，是否要清空未执行完的动画队列；

2、 gotoEnd：可选，boolean类型，是否直接将正在执行的动画跳转到末状态

实现停止当前动画并直接达到动画的末状态

$(function() {
	$("#panel").hover(function() {
		$(this).stop(true,true).animate({
			height : "150",
		}, 2000).animate({
			width : "300"
		}, 2000);
	}, function() {
		$(this).stop(true,true).animate({
			height : "22",
		}, 3000).animate({
			width : "300"
		}, 2000);
	});
})

******************************************************3、判断元素是否处于动画状态******************************

$(function() {
	if (!$("element").is(":animated")) {
		// 如果元素不处于动画状态，则为元素添加动画
		....................
	}
})

******************************************************4、其他方法**************************************************

$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().toggle();		//点击主题，显示与隐藏
		$(this).next().slideToggle();	//点击主题，滑动显示与隐藏
		$(this).next().fadeTo(600, 0.2);//点击主题，渐退显示
		$(this).next().fadeToggle();	//点击主题，渐退显示与隐藏
	})
})

$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().toggle(); // 点击主题，显示与隐藏，
	});
})
//toggle()相当于以下代码
$(function() {
	$("#panel h5.head").toggle(function() {
		$(this).next().hide();
	}, function() {
		$(this).next().show();
	});
})

$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().slideToggle(); //点击主题，滑动显示与隐藏
	});
})
//slideToggle()相当于以下代码
$(function() {
	$("#panel h5.head").toggle(function() {
		$(this).next().slideUp();
	}, function() {
		$(this).next().slideDown();
	});
})

//fadeToggle()相当于以下代码
$(function() {
	$("#panel h5.head").click(function() {
		$(this).next().fadeToggle(); //点击主题，渐退显示与隐藏
	});
})

$(function() {
	$("#panel h5.head").toggle(function() {
		$(this).next().fadeIn();
	}, function() {
		$(this).next().fadeOut();
	});
})

动画animate(params , speed , callback)

猜你喜欢