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

Jquery-day02

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>JQ-animate</title>
  6.      <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.      <script>
  8.  $(document).ready(function () {
  9.      $(".wheat").mousemove(function () {
  10.          $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow");  //动画
  11.          //+=累加
  12.  
  13.          //opacity 属性设置元素的不透明级别。
  14.          //必需的 params 参数定义形成动画的 CSS 属性。
  15.          //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  16.          //可选的 callback 参数是动画完成后所执行的函数名称。
  17.      })
  18.  })
  19.  
  20.      </script>
  21.  </head>
  22.  <body>
  23.  <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">
  24.     jquery
  25.  </div>
  26.  <!-- absolute
  27.      生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  28.      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  29.      fixed
  30.      生成绝对定位的元素，相对于浏览器窗口进行定位。
  31.      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  32.      relative
  33.      生成相对定位的元素，相对于其正常位置进行定位。
  34.      因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。-->
  35.  </body>
  36.  </html>

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>JQ-stop</title>
  6.      <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.      <script>
  8.          $(document).ready(function () {
  9.              $(".div1").mousemove(function () {
  10.                  $(".div2").animate({height:'200px'},3000);
  11.              })
  12.              $("button").click(function () {
  13.                  $(".div2").stop(true);     //默认false手动设置true
  14.              })
  15.          })
  16.          //可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  17.          //可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
  18.          //因此，默认地，stop() 会清除在被选元素上指定的当前动画。
  19.  
  20.          // jQuery stop() 方法用于停止动画或效果，在它们完成之前。
  21.          //stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
  22.          </script>
  23.  </head>
  24.  <body>
  25.      <button type="button">停止</button>
  26.      <div class="div1" style="width: 200px; height: 50px; background: wheat"></div>
  27.      <div class="div2" style="width: 200px; height: 0px; background: purple;position: absolute"></div>
  28.  
  29.  </body>
  30.  </html>

3.callback函数-（JQ-2.3）

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>JQ-callback</title>
  6.      <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.      <script>
  8.          $(document).ready(function () {
  9.              $(".wheat").click(function () {
  10.                  $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow",function () {
  11. 11                     alert("动画完成");
  12.                  });  //动画
  13.                  //+=累加
  14.  
  15.                  //opacity 属性设置元素的不透明级别。
  16.                  //必需的 params 参数定义形成动画的 CSS 属性。
  17.                  //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  18.                  //可选的 callback 参数是动画完成后所执行的函数名称。
  19.              })
  20.          })
  21.  
  22.      </script>
  23.  </head>
  24.  <body>
  25.  <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute">
  26.      jquery
  27.  </div>
  28.  <!-- absolute
  29.      生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  30.      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  31.      fixed
  32.      生成绝对定位的元素，相对于浏览器窗口进行定位。
  33.      元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  34.      relative
  35.      生成相对定位的元素，相对于其正常位置进行定位。
  36.      因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。-->
  37.  </body>
  38.  </html>

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

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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>JQ-Chaining</title>
  6.      <script type="text/javascript" src="jquery-3.3.1.js"></script>
  7.      <script>
  8.      $(document).ready(function () {
  9.          $("button").click(function () {
  10.              $(".div1").slideToggle(1000).css("background","wheat").animate({height:'200px'});
  11.              //使用效果  滑动效果，css属性，动画效果
  12.              //Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
  13.          })
  14.      })
  15.          </script>
  16.  </head>
  17.  <body>
  18.  
  19.      <button type="button" style=" height: 30px; width: 200px;">点击运行</button>
  20.  <div class="div1" style="height: 100px; width: 200px; background: purple"></div>
  21.  
  22.  </body>
  23.  </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. 开启vmotion，实现虚拟机可以在线迁移的选项

    先决条件: 1.vcenter5.5 2.vmotion服务开启 3.分布式交换机已经部署完毕 4.虚拟机在线迁移必须在web管理下,在vclient不可以

  2. ZedGraph 总论

       ZedGraph 总论            ZedGraph 是一个开源的.NET图表类库, 并且全部代码都是用C#开发的.它可以利用任意的数据集合创建2D的线性和柱形图表.          ...

  3. Oracle10g客户端连接远程数据库配置图解

    yuanwen:http://blog.csdn.net/DKZhu/article/details/6027933 一.      安装oracle客户端 1. 运行setup.exe,出现 2. ...

  4. python 模块 optparse

    optparse,是一个能够让程式设计人员轻松设计出简单明了.易于使用.符合标准的Unix命令列程式的Python模块.生成使用和帮助信息. 下面是一个简单的示例: import optparse p ...

  5. c作图-正弦函数图像

    #include<graphics.h>#include<math.h>int main(){    int gmode,gdriver=DETECT; double x1,y ...

  6. 【285】ArcPy 暗色窗体设置

    预览图 设置如下 Default:

  7. 尝试在centos5下运行phantomjs2

    在redhat5上运行plantomjs 2,出现如下错误 bin/phantomjs: /lib64/libz.so.1: no version information available (req ...

  8. java中FILE类常用API介绍

  9. Xcode迁移工程常见问题

    [Xcode迁移工程常见问题] 1.Header Search Paths (HEADER_SEARCH_PATHS) 是否设置正确.在Search Paths group下. 2.Framework ...

  10. 玩转Mysql命令

    连接数据库mysql -hlocalhost -uroot -p 在MYsql的跟目录文件下进行 show databses:展示所有数据库 解决方法1:在MySql安装目录下找到my.ini,将[m ...