jquery 动画

jQuery 中得事件和动画


首先，javascript 和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的
当文档或者某个其他的你、某个元素发生其他的变化或是操作时候，浏览器就会自动生成一个事件


简单的绑定事件bind()


合成事件 jquery有两个合成事件----hover()方法和toggle方法
hover方法用于模拟光标悬停的事件效果
语法的结构为hover(enter,leave);
当鼠标移动上去时执行enter函数，当离开时执行第二个函数leave


jquery中得动画效果，
常见的hide和show方法是最基本的动画方法


用jquery做动画效果要在标准模式下，否则可能会引起动画的抖动标准模式也就是其包含如下dtd文件


与show方法不同的是fadeIn和fadeOut方法是改变元素的不透明度知道消失dadeIn正好相反。我们只想改变元素的不透明度
而不想改变高度就可以使用fadeOut方法


slideUp和slideDown方法自会改变元素的高度，当调用slideDown方法这个元素由上之下的延伸
知道其全部显示而slideUp正好相反


jquery中任何动画的效果都可以设置三中速度参数，分别为slow  normal first


分别为0.6 0.4 和0.2 如果用速度关键字就要加引号，如果是数值的话就不用加




自定义动画的animate


前面讲得三种方法，show和hide方法只改变元素的样式属性，而fadeIn和fadeOut只改变他的透明度而slideUp
和slideDown只改变元素的高度很多的情况下都没法满足我们的需求


那么我们就需要运用些高级之定义的动画效果来解决这些问题，就是animate


首先他的语法结构为
animate (params,speed,callback)
三个参数的说明：params是一个包含样式属性值的映射{“style”,"value"}
speed是速度参数再就是callback是在完成动画的时候执行的函数


在例子中要想吧隐藏改为自己想要的css("border","5px solid blue")样式的话
直接将fadeDown改为css方法斌不能达到预期的效果，在刚开始动画的时候css方法就被
执行了，这个为问题的的原因在意css并不会被加入到动画的队列当中，而是立即执行
在这里我们可以使用回调函数，对非动画元素实现排队吧css方法写入最后的一个回调函数里面就行了

改为function（）{$(this).css("")}

<div class="dong" style=" width:100px; height:100px; background:#666; cursor:pointer; position:relative"></div>


 <script>
 $(function(){
$(".dong").css("opacity","0.5");
$(".dong").click(function(){
$(this).animate({"left":"200px","height":"300px","opacity":"1"},1000).animate({"left":"0px","height":"100px"},1000)
,function(){$(this).css({"background":"#03F","border":"solid 1px #ccc"})}

})
 
})
 
 </script>

callback回调函数适用jquery所有的动画中


停止动画和判断动画是否处于动画状态stop方法


动画的方法概括


首先是基本动画方法，show hide 再就是渐变fadeIn和fadeOut
然后就是高度变化的slideDOwn和slideUp
最后到自定义动画的animate 然后就是交互效的实现分别是fadeTo()改变透明度
toggle()用来代替show和hide 是一个交互方法 slideToggle()用来代替slideUp和slideDown改变交互时候的高度
animate可以代替所有的动画
$("p").animate({"height":"show","width":"show","opacity":"show"},400);
等同于("p").show(400);


动画队列
当一个animate方法中运用多个属性时候，动画是同时发生的。当以链式的方式时是按照顺序发生的
多种元素的动画效果 默认的情况下动画都是同时发生的
当回调的方法应用到动画中时候，动画是按照回调的循序发生的