关于jquery动画的使用和了解

一，描述与对比

jquery的动画因为出的时间早一些，相对比现在使用动画，我们更推荐css3更好一些，但是jquery实现的动画效果也就是用底层原生的js封装实现的，在以前没有css3的时候，基本可以实现一些基本的动画效果，下面我来介绍一些关于jquery的动画的方法

二， 一些基本的动画实现效果

关于实现动画效果的首当其冲的肯定是显示和隐藏了
.hide() .show() .toggle()
关于使用：

    <div>
	     点击
	</div> 
	<span>隐藏</span>
	<script type="text/javascript" src="jquery-1.11.3.js"></script>
	<script type="text/javascript">
	//隐藏
	$('div').on('click', function(){
		$(this).next().hide();
	})
	//显示
	$('div').on('click', function(){
		$(this).next().show();
	})

然后是实现一些动态的显示和隐藏

    //淡入淡出的效果
	$('div').on('click' , function(){
		$(this).next().fadeToggle();
	})
    //卷入卷出的效果
	$('div').on('click' , function(){
		$(this).next().slideToggle();
	})

三，关于自定义动画

在jQuery中，可以使用animate()方法来自定义动画，animate()的语法结构为：animate(params,speed,callback)；params：一个包含样式属性及值的映射速度，speed：参数，可选，callback：回调函数

关于实现简单的动画效果:

$('div').on('click' , function(){
		$(this).next().animate({width : '+200' , height : '+200' , left : '+100' , top : '+100'})
	})
	//可以在里面添加参数，实现简单的运动

当然还有关于动画的停止和一些效果
.stop()（停止）
可以填参和不填参，填true,可以实现点击一下停止一下

$('div').on('click' , function(){
		$(this).next().stop(true).animate({width : '+200' , height : '+200' , left : '+100' , top : '+100'})
	})

.delay() （延时）
参数传递秒速

$('div').on('click' , function(){
		$(this).next().animate({width : '+200' , height : '+200' , left : '+100' , top : '+100'} , 1000).delay(2000)..animate({top:'+200',width:'+200'},3000)
	})