Jquery关于动画的方法常用的是show()、hide()、animate()等。
1.show()和hide()是一对，hide相当于css("display","none"),而show则相当与把css设成除null以外的值，一般是"block"、"inline"，当调用show时，就会根据hide方法记住dispaly的属性值来显示元素。
2.show(600)中还可以带参数，600毫秒中显示，相当于"slow"，"normal"=>400，"fast"=>200.
3.fadeIn()和fadeOut()是通过改变透明度直到css("display","none")来控制显示与隐藏的。
4.slideUp()和slideDown()是通过改变高度来实现显示与隐藏的。
5.animate()是最长用的一种动画显示方法，animate(params,speed,callback)3个参数中最后一个可以不填，第一个是样式属性和值的映射，第二个参数是动画速度，第三个参数是可选的在动画完成时执行的函数。
写了个小玩意，点击移动，css的圆角发现在ie9上实现有点困难。
用的代码很简单，直接新建个html界面复制就行了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { overflow: hidden; } .one { height: 60px; width: 60px; border: 1px solid yellow; background-color: Aqua; position: relative; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } </style> <script src="Scripts/jquery.js" type="text/javascript"></script> </head> <body> <div id="divBody" style=" 100%; height: 100%; background-color: white; position: relative;"> <div class="one" id="divMove"> </div> </div> </body> </html> <script type="text/javascript"> var divMoveJQ = $("#divMove"); var divBodyJQ = $("#divBody"); divBodyJQ.height($(window).height() - 30); //点击空白处 $("#divBody").mousedown(function (e) { var Mouse = mousePos(e); var left1 = (Mouse.x - GetPosition(divBodyJQ).AbsoluteLeft - divMoveJQ.width() / 2).toString() + "px"; var top1 = (Mouse.y - GetPosition(divBodyJQ).AbsoluteTop - divMoveJQ.height() / 2).toString() + "px"; divMoveJQ.animate({ left: left1, top: top1 }, 600); }); //鼠标位置 function mousePos(e) { var x, y; var e = e || window.event; return { x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop }; }; //自适应 $(window).bind("resize", function () { divBodyJQ.height($(window).height() - 30); }); //获取控件位置 function GetPosition(Selector) { var SelectorJQ = $(Selector); var Position = {}; if (SelectorJQ.length > 0) { var position = SelectorJQ.position(); Position.RelativeTop = position.top; Position.RelativeLeft = position.left; var offset = SelectorJQ.offset(); Position.AbsoluteTop = offset.top; Position.AbsoluteLeft = offset.left; } return Position; }; </script>
发现还是写点注释好，怕自己以后忘记了。。。。。
改变样式属性表
| 方法名 |
说明 |
| fadeIn()和fadeOut() | 只改变不透明度 |
| slideUp()和slideDown() | 只改变高度 |
| fadeTo() | 只改变不透明度 |
| toggle() | 用来代替hide()和show() |
| slideToggle() | 代替slideUp()和slideDown() |
| fadeToggle() | 代替fadeIn()和fadeOut() |
| animate() | 自定义动画方法， |
| hide()和show() | 同时改变多个样式属性即宽度高度不透明度 |