在jq中，比较方便的是相对于js，jq封装了很多方法，很方便使用，下面我举几个常用的方法
animate()方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="js/jquery-1.12.4.js"></script> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 </style> 14 </head> 15 16 <body> 17 <div id="jq1"></div> 18 19 20 21 <script> 22 //alert($("div")[0]); 23 //通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性 24 $(jq1)[0].style.width = "100px"; 25 $(jq1)[0].style.height = "100px"; 26 $(jq1)[0].style.background = "red"; 27 $(jq1)[0].style.position = "absolute"; 28 29 //这里我用一个mouseenter方法下触发一个animate()方法 30 //jq官网看不懂，从国内翻译的看吧 31 $(jq1).mouseenter(function() { 32 //$(selector).animate({params},speed,callback); 33 //{}里面的属性和参数通过符号:链接 34 //speed可以控制速度 35 $(this).animate({ 36 left: '250px', 37 opacity: '0.5', 38 height: '150px', 39 '150px' 40 }, 1000) 41 //上面的例子，我控制了宽高透明度以及定位，时间是1秒 42 }); 43 </script> 44 45 </body> 46 47 </html>
实现效果如下：
可以看到，根据我设置的 width，height，opacity，left，我的小红移动了
而且值得注意的是，在这个animal方法可以回调，代码如下
1 <script> 2 //alert($("div")[0]); 3 //通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性 4 $(jq1)[0].style.width = "100px"; 5 $(jq1)[0].style.height = "100px"; 6 $(jq1)[0].style.background = "red"; 7 $(jq1)[0].style.position = "absolute"; 8 9 //这里我用一个mouseenter方法下触发一个animate()方法 10 //jq官网看不懂，从国内翻译的看吧 11 $(jq1).mouseenter(function() { 12 //$(selector).animate({params},speed,callback); 13 //{}里面的属性和参数通过符号:链接 14 //speed可以控制速度 15 $(this).animate({ 16 left: '250px', 17 opacity: '0.5', 18 height: '150px', 19 '150px' 20 }, 1000, function() { 21 $(this).animate({ 22 left: '0px', 23 opacity: '1', 24 height: '100px', 25 '100px' 26 }, 1000); 27 }) 28 //上面的例子，我控制了宽高透明度以及定位，时间是1秒 29 }); 30 </script>
在上面的代码中，我在speed后面加了一个匿名函数，只有在匿名函数中才能被第二次调用，这是一个比较奇怪的地方，直接用是不能使用的
$(selector).animate({params},speed,function(){
$(selector).animate();
});
通过这个回调，我设置了让小红框回到原来的样子，就不放图了