zoukankan      html  css  js  c++  java
  • 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                  '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();

    });
    通过这个回调,我设置了让小红框回到原来的样子,就不放图了
  • 相关阅读:
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark RDD(Resilient Distributed Datasets)论文
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    【机器学习实战】第10章 K-Means(K-均值)聚类算法
    [译]flexbox全揭秘
  • 原文地址:https://www.cnblogs.com/WhiteM/p/6122032.html
Copyright © 2011-2022 走看看