笔记:JQuery之动画

版权声明: https://blog.csdn.net/qq_36797286/article/details/81842044

1. 显示隐藏加毫秒

$(".head").toggle(function(){
	$(".content").show(1000);
}, function(){
	$(".content").hide(1000);
});

2. 改变高度

$(".head").toggle(function(){
	$(".content").slideDown(500);
}, function(){
	$(".content").slideUp(500);
});

3. 只改变透明度

$(".head").toggle(function(){
	$(".content").fadeIn(1000);
}, function(){
	$(".content").fadeOut(1000);
});

4.

//toggle() 可以切换元素的可见状态.
//slideToggle(): 通过高度变化来切换匹配元素的可见性
//fadeToggle(): 通过透明度来切换元素的可见性.
//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间).
$(".content").show();
var i = 1;

$(".head").click(function(){
	//$(".content").toggle();
	//$(".content").slideToggle();
	//$(".content").fadeToggle();
	
	$(".content").fadeTo("slow", i);
	i = i - 0.1;
});

猜你喜欢

转载自blog.csdn.net/qq_36797286/article/details/81842044