动画效果

// 基本

show([s,[e],[fn]])

hide([s,[e],[fn]])

toggle([s],[e],[fn])

// 滑动

slideDown([s],[e],[fn])

slideUp([s,[e],[fn]])

slideToggle([s],[e],[fn])

// 淡入淡出

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

fadeTo([[s],o,[e],[fn]])

fadeToggle([s,[e],[fn]])

// 自定义（了解即可）

animate(p,[s],[e],[fn])

自定义动画示例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>点赞动画示例</title>

  <style>

    div {

      position: relative;

      display: inline-block;

    }

    div>i {

      display: inline-block;

      color: red;

      position: absolute;

      right: -16px;

      top: -5px;

      opacity: 1;

    }

  </style>

</head>

<body>

<div id="d1">点赞</div>

<script src="jquery-3.2.1.min.js"></script>

<script>

  $("#d1").on("click", function () {

    var newI = document.createElement("i");

    newI.innerText = "+1";

    $(this).append(newI);

    $(this).children("i").animate({

      opacity: 0

    }, 1000)

  })

</script>

</body>

</html>

点赞特效简单示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <style>

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<img src="z.png" alt="">

<script src="jquery-3.2.1.min.js"></script>

<button class="c1">召唤</button>

<button class="c2">淡出</button>

<button class="c3">淡入</button>

<button class="c4">淡出到0.66透明度</button>

<button class="c5">淡入淡出</button>

<button class="c6">动画:图片变小</button>

<script>

    $(".c1").on("click",function () {

//        $("img").hide();

//        $("img").show();

        $("img").toggle();

    });

//    淡出

    $(".c2").on("click",function () {

        $("img").fadeOut();

        $("img").fadeOut("fast"); //快速的淡出

    });

//    淡入

    $(".c3").on("click",function () {

//        增加淡入的时间

        $("img").fadeIn(3000,function () {

//            alert(123)

        });

    });

//    淡出到0.66透明度

    $(".c4").on("click",function () {

        $("img").fadeTo(3000,0.66,function () {

//            alert(123)

        })

    });

//    淡入淡出

    $(".c5").on("click",function () {

        $("img").fadeToggle(3000,function () {

//            alert(123)

        })

    })

//    动画-图片变小

    $(".c6").on("click",function () {

        $("img").animate(

            {

                width:"80px",

                height:"80px"

            },3000,function () {

                //这是一个回调函数

                alert(123)

            }

        )

    })

</script>

</body>

</html>

动画效果

web前端----jQuery动画效果的更多相关文章

  1. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  2. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  3. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

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

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

  5. JQuery动画效果

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

  6. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

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

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

  8. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  9. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

随机推荐

  1. python开发环境搭建(python2.7.5+pyCharm2.7.3)【原创】

    1.下载python 官网下载最新版python http://www.wingide.com/downloads 2.下载PyCharm 官网可下载最新版pyCharm-professional h ...

  2. powerdesigner唯一约束设置

    双击unique_pos_code

  3. Timer应用之Interval优化

    开发中, 有时有这种场景,使用 Timer 的 Timer_Elapsed 间隔  执行(如:从数据库)获取数据 与 现有 应用服务器中的 静态变量数据(起到缓存的目的)做 对比 ,若有改变,则 更新 ...

  4. 移动IP 它最初设想每个人都在编写应用层（7）API而不是传输层（4）API 对于QUIC，连接的标识符不是“套接字”（源/目标端口/地址协议组合）的传统概念，而是分配给连接的64位标识符

    小结: 1. 因为您对OSI模型的教育中缺少的一点是,它最初设想每个人都在编写应用层(7)API而不是传输层(4)API.应该有像应用程序服务元素之类的 东西,它们可以以标准方式处理文件传输和消息传递 ...

  5. 特征向量-Eigenvalues_and_eigenvectors#Graphs 线性变换

    总结: 1.线性变换运算封闭,加法和乘法 2.特征向量经过线性变换后方向不变 https://en.wikipedia.org/wiki/Linear_map Examples of linear t ...

  6. svm核函数的理解和选择

    https://blog.csdn.net/leonis_v/article/details/50688766 特征空间的隐式映射:核函数    咱们首先给出核函数的来头:在上文中,我们已经了解到了S ...

  7. 【深入理解javascript】王福朋，厉害了word哥

    学习前端有一段时间了,一直以来也没搞明白js中这个闭包到底是个什么东西,有时候看看别人的博客或者知乎的文章,大概上有个了解,可过一段时间也就忘了.偶然间有幸拜读了博客园-王福朋的这一系列文章<深 ...

  8. Ceph 分布式存储

    前言 Ceph是一个分布式存储系统,诞生于2004年,最早致力于开发下一代高性能分布式文件系统的项目.随着云计算的发展,ceph乘上了OpenStack的春风,进而成为了开源社区受关注较高的项目之一. ...

  9. [javascript]编码&i字符串格式化&nput历史记录&清空模态框

    js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 ...

  10. KMP（http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2772）

    #include <stdio.h>#include <string.h>#include <stdlib.h>char a[1000001],b[1000001] ...