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

在jq中，比较方便的是相对于js，jq封装了很多方法，很方便使用，下面我举几个常用的方法

animate()方法

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
     <style type="text/css">
         * {
             margin: 0;
             padding: 0;
         }
     </style>
 </head>

 <body>
     <div id="jq1"></div>

     <script>
         //alert($("div")[0]);
         //通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性
         $(jq1)[0].style.width = "100px";
         $(jq1)[0].style.height = "100px";
         $(jq1)[0].style.background = "red";
         $(jq1)[0].style.position = "absolute";

         //这里我用一个mouseenter方法下触发一个animate()方法
         //jq官网看不懂，从国内翻译的看吧
         $(jq1).mouseenter(function() {
             //$(selector).animate({params},speed,callback);
             //{}里面的属性和参数通过符号:链接
             //speed可以控制速度
             $(this).animate({
                 left: '250px',
                 opacity: '0.5',
                 height: '150px',
                 width: '150px'
             }, 1000)
             //上面的例子，我控制了宽高透明度以及定位，时间是1秒
         });
     </script>

 </body>

 </html>

实现效果如下：

可以看到，根据我设置的 width，height，opacity，left，我的小红移动了

而且值得注意的是，在这个animal方法可以回调，代码如下

 <script>
         //alert($("div")[0]);
         //通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性
         $(jq1)[0].style.width = "100px";
         $(jq1)[0].style.height = "100px";
         $(jq1)[0].style.background = "red";
         $(jq1)[0].style.position = "absolute";

         //这里我用一个mouseenter方法下触发一个animate()方法
         //jq官网看不懂，从国内翻译的看吧
         $(jq1).mouseenter(function() {
             //$(selector).animate({params},speed,callback);
             //{}里面的属性和参数通过符号:链接
             //speed可以控制速度
             $(this).animate({
                     left: '250px',
                     opacity: '0.5',
                     height: '150px',
                     width: '150px'
                 }, 1000, function() {
                     $(this).animate({
                         left: '0px',
                         opacity: '1',
                         height: '100px',
                         width: '100px'
                     }, 1000);
                 })
                 //上面的例子，我控制了宽高透明度以及定位，时间是1秒
         });
     </script>

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

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

$(selector).animate();

});
通过这个回调，我设置了让小红框回到原来的样子，就不放图了