$下载链接详情点击Jquery-day01查看官方网站下载地址

Jquery-day02

1.Jquery动画使用animate-（JQ-2.1）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-animate</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

 $(document).ready(function () {

     $(".wheat").mousemove(function () {

         $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow");  //动画

         //+=累加

         //opacity 属性设置元素的不透明级别。

         //必需的 params 参数定义形成动画的 CSS 属性。

         //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

         //可选的 callback 参数是动画完成后所执行的函数名称。

     })

 })

     </script>

 </head>

 <body>

 <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">

    jquery

 </div>

 <!-- absolute

     生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

     元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

     fixed

     生成绝对定位的元素，相对于浏览器窗口进行定位。

     元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

     relative

     生成相对定位的元素，相对于其正常位置进行定位。

     因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。-->

 </body>

 </html>

2.停止一切动画stop-（JQ-2.2）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-stop</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $(".div1").mousemove(function () {

                 $(".div2").animate({height:'200px'},3000);

             })

             $("button").click(function () {

                 $(".div2").stop(true);     //默认false手动设置true

             })

         })

         //可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

         //可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

         //因此，默认地，stop() 会清除在被选元素上指定的当前动画。

         // jQuery stop() 方法用于停止动画或效果，在它们完成之前。

         //stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

         </script>

 </head>

 <body>

     <button type="button">停止</button>

     <div class="div1" style="width: 200px; height: 50px; background: wheat"></div>

     <div class="div2" style="width: 200px; height: 0px; background: purple;position: absolute"></div>

 </body>

 </html>

3.callback函数-（JQ-2.3）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-callback</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

         $(document).ready(function () {

             $(".wheat").click(function () {

                 $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow",function () {

11                     alert("动画完成");

                 });  //动画

                 //+=累加

                 //opacity 属性设置元素的不透明级别。

                 //必需的 params 参数定义形成动画的 CSS 属性。

                 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

                 //可选的 callback 参数是动画完成后所执行的函数名称。

             })

         })

     </script>

 </head>

 <body>

 <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">

     jquery

 </div>

 <!-- absolute

     生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

     元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

     fixed

     生成绝对定位的元素，相对于浏览器窗口进行定位。

     元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

     relative

     生成相对定位的元素，相对于其正常位置进行定位。

     因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。-->

 </body>

 </html>

引用JQ-2.1的代码  实现callback函数

function () {   alert("动画完成");   代码中红色标注部分。

4.使用Chaining方式在相同元素上运行多条Jquery。-(JQ-2.4)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ-Chaining</title>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script>

     $(document).ready(function () {

         $("button").click(function () {

             $(".div1").slideToggle(1000).css("background","wheat").animate({height:'200px'});

             //使用效果  滑动效果，css属性，动画效果

             //Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）

         })

     })

         </script>

 </head>

 <body>

     <button type="button" style=" height: 30px; width: 200px;">点击运行</button>

 <div class="div1" style="height: 100px; width: 200px; background: purple"></div>

 </body>

 </html>

$总结

　　　　到此部分为Jquery基础部分。

　　　　

Jquery的动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  10. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. 源码安装ceph后使用测试集群的方法

    标签(空格分隔): ceph,ceph实验,ceph源码 通过博客 源码编译安装ceph(aarch64架构) 成功安装ceph之后,之后可以运行一个测试集群进行实验 1,进入安装构建目录: [roo ...

  2. openstack及组件简要介绍

    为什要用云? 一.简单的说就是对资源更加合理的分配,使用,比如硬件的数量,带宽等等这些,因为你不能机器买来不需要了再卖掉(当然也可以),带宽跟机房签合同得来一年的,中间不够了也不能加,超了也不退钱 二 ...

  3. 1112 Stucked Keyboard

    题意:坏掉的键若被按下,总是重复打出k次.比如,k为3,打出的序列如下—— thiiis iiisss a teeeeeest 坏掉的键是i和e,虽然iiisss中s也出现了3次,但它不是坏掉的键,因 ...

  4. Oracle日常性能问题查看

    1 判断回滚段竞争的sql --当Ratio大于2时存在回滚段竞争,需要增加更多的回滚段) ratio from v$rollstat rs, v$rollname rn where rs.USN = ...

  5. JS比较实用的时间控件

    使用方法: 下载下来压缩包,文件的地方不要改变,就可以了 http://www.my97.net/dp/down.asp html的代码: <input readonly="reado ...

  6. 消息队列函数(msgget、msgctl、msgsnd、msgrcv)及其范例

    消息队列函数由msgget.msgctl.msgsnd.msgrcv四个函数组成.下面的表格列出了这四个函数的函数原型及其具体说明. 1.   msgget函数原型 msgget(得到消息队列标识符或 ...

  7. oracle分布式事务总结

    基本概念 Local Coordinator:在分布事务中,必须参考其它节点上的数据才能完成自己这部分操作的站点. Global Coordinator:分布事务的发起者,负责协调这个分布事务. Co ...

  8. adb正常，手机启动usb调试，adb devices下没有改设备

    手机开启开发者模式,adb正常时adb devices下没有设备: 1.进入设备管理器--查找adb的硬件id

  9. generate_scripts

    echo "#!/usr/bin/env python" >$1echo "#-*- encoding=UTF-8 -*-" >>$1echo ...

  10. Python Twisted系列教程6：抽象地利用Twisted

    作者:dave@http://krondo.com/and-then-we-took-it-higher/  译者:杨晓伟(采用意译) 你可以从这里从头开始阅读这个系列. 打造可以复用的诗歌下载客户端 ...