2017.11.23笔记

jQuery动画

1. show() 方法和 hide() 方法

调用hide()方法会将元素的display样式改为' none '。
show()方法将元素的display样式设置为先前的显示状态。
show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。

		$('p').toggle(function(){
			$(this).hide(2000);
		},function(){
			$(this).show(2000);
		}) 

2.fadeIn()和fadeOut()方法

fadeIn()和fadeOut()方法只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。

		$('p').toggle(function(){
			$(this).fadeOut();
		},function(){
			$(this).fadeIn();
		}) 

3.slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。
如果一个元素的 display 属性值为'none',调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

		$('p').toggle(function(){
			$(this).slideUp();
		},function(){
			$(this).slideDown();
		}) 

jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。

4.animate()方法

可以使用animate()方法来自定义动画。
结构：animate(params,speed,callback)

		$('#panel').click(function(){
			lg('click');
			$(this).animate({left:'+=500px'}, 3000);
		});       
        //多重动画
		$('#panel').click(function(){
			lg('click');
			$(this).animate({left:'+=500px',top:'+=500px'}, 30000);
		});