JQuery笔记(二)jq常用方法animate()

在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                 width: '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                     width: '150px'
20                 }, 1000, function() {
21                     $(this).animate({
22                         left: '0px',
23                         opacity: '1',
24                         height: '100px',
25                         width: '100px'
26                     }, 1000);
27                 })
28                 //上面的例子，我控制了宽高透明度以及定位，时间是1秒
29         });
30     </script>

在上面的代码中，我在speed后面加了一个匿名函数，只有在匿名函数中才能被第二次调用，这是一个比较奇怪的地方，直接用是不能使用的

$(selector).animate({params},speed,function(){
　　
$(selector).animate();

});
通过这个回调，我设置了让小红框回到原来的样子，就不放图了
posted @ 2016-12-01 15:11  rookieM  阅读(1060)  评论(0)  编辑  收藏  举报