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();

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

转载于:https://www.cnblogs.com/WhiteM/p/6122032.html

JQuery笔记(二)jq常用方法animate()相关推荐

jQuery笔记总结篇
首先,来了解一下jQuery学习的整体思路 jQuery系统学习篇 jQuery系统学习篇-XMind源文件提供参考下载 Jquery笔记 jQuery笔记总结-XMind源文件提供参考下载第一节 ...
amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
【jQuery笔记Part4】02-jQuery微博案例
jQuery微博案例 jQuery.trim(str) 去掉字符串起始和结尾的空格焦点 focus() 设置焦点 blur() 失去焦点微博案例静态页面监听发布按钮点击添加删除事件(存在问题 ...
【jQuery笔记Part3】02-jQuery抖动效果
jQuery抖动效果雪碧图(精灵图) 什么是雪碧图? 使用雪碧图的目的显示雪碧图的条件静态页面展示图片抖动效果 jQuery笔记目录雪碧图(精灵图) 什么是雪碧图? 雪碧图是根据CSS s ...
【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换概念为什么要转换转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象原理图 jQuery笔记目录概念 jQuery对象是通 ...
课堂jQuery笔记
课堂jQuery笔记一.Dom操作 1.append()末尾插入 $('.box').append($('<h1>Hello World1</h1>')); 2.prepen ...
jQuery笔记综合
jQuery笔记一. jQuery入门目标: 能够说出什么是jQuery 能够说出jquery的优点能够简单使用jquery 能够说出dom对象和jquery对象的区别 1.jQuery概述仓 ...
前端：jQuery笔记
前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...

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

JQuery笔记(二)jq常用方法animate()相关推荐

最新文章

热门文章