在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();
});
通过这个回调，我设置了让小红框回到原来的样子，就不放图了

JQuery笔记(二)jq常用方法animate()的更多相关文章

  1. jQuery总结或者锋利的jQuery笔记二

    第三章  jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) ,  层次选择器(div ul),(div> ...

  2. jQuery笔记二——基础/动画

    1. jQuery的基础语法: $(selector).action() 2. 很多jQuery的语句放在ready里面 $(document).ready(function(){ // jQuery ...

  3. JQuery笔记(一)jq的使用方法

    我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本 官网的链接是只有最新的3下载,我把我在官网下载的jq代码链接发出来,如下 点我获取jq代码 和js不同的是,jq开发者封装了一些方法 ...

  4. jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  5. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  6. Jquery笔记和ajax笔记

    Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...

  7. amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

  8. 转)delphi chrome cef3 控件学习笔记 (二)

    (转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...

  9. Jquery元素选取、常用方法

    一:常用的选择器:(李昌辉) 基本选择器 $("#myDiv") //匹配唯一的具有此id值的元素 $("div") //匹配指定名称的所有元素 $(" ...

随机推荐

  1. Redis系统学习 二、数据结构

    一.字符串     1.在Redis里,字符串是最基本的数据结构.当你在思索着关键字-值对时,你就是在死锁着字符串数据结构.不要被名字给搞混了. 常见实例: set users:leto " ...

  2. MVC4.0系统开发新手历程1

    MVC4.0系统开发新手历程(一) 接手了一个简单的销售奖金计算的项目,虽然不算大但是业务逻辑比较复杂,还夹杂了很多的特殊情况,毕竟是大公司什么样的人都有,好了不多说切入正题,项目是公司的一个前辈负责 ...

  3. Android自定义组合控件内子控件无法显示问题

    今天自定义了一个组合控件,与到了个奇葩问题: 我自定义了一个RelativeLayout,这个layout内有多个子控件.但奇怪的是这些子控件一直显示不出来.调试了一下午,竟然是因为在获取(infla ...

  4. 读取的XML节点中带有冒号怎么办？

    读取的XML节点中带有冒号怎么办? 昨天,编程读取XML的时候,遇上了类似下面的一段XML <a:root xmlns:a="http://ww.abc.com/"> ...

  5. Chrome浏览器网页截全屏算法以及实现

    做个一个简单的批量下载插件叫“挖一下”, 正如插件的名字一样,采集网页里面的所有图片,根据筛选条件过滤不需要的图片,最后下载选中的图片. 索性把网页也一起给截了,截屏分两种: 1.可见内容截屏 2.完 ...

  6. javascript操作写入txt文件及消息: Automation 服务器不能创建对象问题

    简单的写入txt代码: function WriteTxt() {      var fso, tf;      fso = new ActiveXObject("Scripting.Fil ...

  7. JBoss + EJB3 + MySql : 开发第一个EJB

    JBoss开发Bean并不困难,而对于不知道的人来说,数据库配置才是比较棘手的问题.现在我们就来一步一步开发一个EJB3 + MySql的Bean. 一.MySql数据库的配置 1. 配置数据源 在 ...

  8. Objective-C非正式协议与正式协议

    这两个概念困扰我很久了,一直都很像搞清楚到非正式协议和正式协议有什么区别和联系,下面结合网上的资料和自己的看法谈谈这个问题. 一.非正式协议 显然这个名词是相对于正式协议而言的.在解释非正式协议之前, ...

  9. Java synchronized 详解

    Java synchronized 详解 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 1.当两个并发线程访问同一个对象object ...

  10. FineReport中以jws方式调用WebService数据源方案

    在使用WebService作为项目的数据源时,希望报表中也是直接调用这个WebService数据源,而不是定义数据连接调用对应的数据库表,这样要怎么实现呢? 在程序中访问WebService应用服务, ...