jQuery动画：
<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 400px;

      height: 400px;

      background-color: pink;

      display: none;

    }

  </style>

</head>

<body>

  <input type="button" value="显示">

  <input type="button" value="隐藏">

  <div></div>

</body>
　　1.jQuery.show()和jQuery.hide() 显示与隐藏
  <script>

    /* 1.jQuery.show()和jQuery.hide() 显示与隐藏

　　　　a.不传参数，没有动画效果，show()：直接显示 hide()：直接隐藏，比较常用

　　　　b.show(speed)和hide(speed)

　　　　　　speed:动画的持续时间 ，可以是毫秒值 ，还可以是固定字符串

　　　　　　fast:200ms normal:400ms slow:600ms

　　　　c.show([speed], [callback])和hide([speed],[ callback])

　　　　　　[ ]中括号表示可选择参数，并非表示数组

　　　　　　callback: 回调函数 */

    $(function () {

      $("input").eq(0).click(function () {

        $("div").show(1000, function () {

          console.log("哈哈，动画执行完成啦");

        })

      });

      $("input").eq(1).click(function () {

        $("div").hide();

      })

    });

  </script>
　　2.滑入滑出动画
  <script>

    $(function () {

      //滑入（slideDown）  滑出：slideU

      //     jQuery.slideDown()滑入动画:从上往下显示

      // 　　　　jQuery.slideUp()滑出动画:从下往上隐藏

      // 　　　　jQuery.slideToggle()如果是滑入状态，就执行滑出的动画，如果是滑出状态，则不操作

      // 　　　　　　用法和jQuery.show()和jQuery.hide()用法一样，

      // 　　　　不同是如果不传speed参数，默认为normal

      $("input").eq(0).click(function () {

        $("div").slideDown(1000, function () {

          console.log("额呵呵");

        });

      });

      $("input").eq(1).click(function () {

        $('div').slideUp();

      })

      $("input").eq(2).click(function () {

        //如果是滑入状态，就执行滑出的动画，

        $('div').slideToggle();

      })

    });

  </script>
　　3.淡入淡出动画
<script>

    $(function () {

      //淡入：fadeIn  淡出：fadeOut    切换：fadeToggle

      //jQuery.fadeIn()淡入动画

      //jQuery.fadeOut()淡出动画

      //jQuery.fadeToggle()如果是淡入状态，就执行淡出动画，如果为淡出状态，则不操作

      　　//用法和jQuery.show()和jQuery.hide()用法一样，

      　　//不同是如果不传speed参数，默认为normal

      $("input").eq(0).click(function () {

        $("div").fadeIn(2000);

      });

      $("input").eq(1).click(function () {

        $("div").fadeOut(1000);

      })

      $("input").eq(2).click(function () {

        //如果是滑入状态，就执行滑出的动画，

        $('div').fadeToggle();

      })

    });

  </script>
 
 
4.自定义动画
jQuery.animate(json,speed,easing, callback);
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      background-color: pink;

      position: absolute;

    }

    #box2 {

      background-color: blue;

      margin-top: 150px;

    }

    #box3 {

      background-color: yellowgreen;

      margin-top: 300px;

    }

  </style>

</head>

<body>

<input type="button" value="开始">

<input type="button" value="结束">

<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    $("input").eq(0).click(function () {

      //第一个参数：对象，里面可以传需要动画的样式

      //第二个参数：speed 动画的执行时间

      //第三个参数：动画的执行效果

      //第四个参数：回调函数

      $("#box1").animate({left:800}, 8000);

      //swing:秋千 摇摆

      $("#box2").animate({left:800}, 8000, "swing");

      //linear:线性 匀速

      $("#box3").animate({left:800}, 8000, "linear", function () {

        console.log("hahaha");

      });

    })

  });

</script>

</body>

</html>

jQuery 动画用法的更多相关文章

  1. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

  2. jQuery动画详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 动画 jQuery提供的一组网页中常见的动画效果,这些动画 ...

  3. jQuery 动画效果

    推荐网址:http://www.php100.com/manual/jquery/,用法教学,包括实例. 分类:显示隐藏.淡入淡出.滑动.自定义. <%@ Page Language=" ...

  4. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  5. jQuery动画知识总结

    jQuery动画概述 我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用jQuery动画,将下拉菜单案例实现的更动感一些. jQuery提供 ...

  6. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  7. jQuery系列（三）：jQuery动画效果

    jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.显示动画 方式一: $("div").show(); 解释:无 ...

  8. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

随机推荐

  1. Rabbitmq的几种交换机模式

    Rabbitmq的核心概念(如下图所示):有虚拟主机.交换机.队列.绑定: 交换机可以理解成具有路由表的路由程序,仅此而已.每个消息都有一个称为路由键(routing key)的属性,就是一个简单的字 ...

  2. 一篇很好的关于mysqld_safe脚本源码解读的文章，收藏了！！

    #!/bin/sh # 一些状态变量的定义 KILL_MYSQLD=; # 试图kill多余的mysqld_safe程序,1表示需要kill MYSQLD= # mysqld二进制可执行文件的名称 n ...

  3. Resolving multicopy duplications de novo using polyploid phasing 用多倍体相位法解决多拷贝复制的新问题

    抽象.虽然单分子测序系统的兴起已经实现组装复杂地区的能力空前提高在基因组中,基因组中的长节段重复仍然是装配中具有挑战性的前沿. 分段重复同时具有丰富的基因并且倾向于大的结构重排,使得它们的序列的分辨率 ...

  4. eigen安装

    https://blog.csdn.net/liuxiaoheng1992/article/details/54410148

  5. Spring boot——logback.xml 配置详解（三）<appender>

    阅读目录 1 appender 2  encoder 文章转载自:http://aub.iteye.com/blog/1101260,在此对作者的辛苦表示感谢! 回到顶部 1 appender < ...

  6. Mybatis之Configuration初始化（配置文件.xml的解析）

    源码解读第一步我觉着应该从Mybatis如何解析配置文件开始. 1.先不看跟Spring集成如何解析,先看从SqlSessionFactoryBuilder如果解析的. String resouce ...

  7. Spring MVC之RequestMappingHandlerAdapter初始化

    RequestMappingHandlerAdapter基于注解的处理器适配器,目的是用来执行handler,同时返回modelAndView给前端控制器,这块个人感觉是spring mvc的核心了, ...

  8. redis windows下安装

    1.下载redis windows文件包 下载地址 2.解压文件包 复制压缩包地址 3.进入cmd 命令行 cd进入redis文件包目录 4.执行 redis-server.exe  使用netsta ...

  9. kalilinux、parrotsecos没有声音

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下: (1)在终端执行命令:systemctl --user enable pulseaudio (2)在/ ...

  10. D3 数据可视化实战 笔记

    学习真是件奇妙的事情.这本书我之前都看过,有些的知识点却完全没有印象. 总结:把用到的知识好好研究:平时可以了解其他技术的基础,把相关的资料和难点记录下来. javascript陷阱 1.变量类型 v ...