js 动画提示数据有变化
let groupZiArray = $。。。。。;
for (let i = 1; i < groupZiArray.length; i++) {
let $groupZi = $(groupZiArray[i]);
//有变化的话进行提示
if ($groupZi.html() != ('子分组' + i)) {
$groupZi.animate({ fontSize: '18px' },
300,
function() {
$groupZi.html('子分组' + i);
$groupZi.animate({ fontSize: '16px' }, 300);
});
}
以上代码是使用场景代码片段,核心代码animate,代码效果是如果html内容发生了变化,那么就将字体先变大一点,再恢复之前大小。
支持以下属性
- backgroundPositionX
- backgroundPositionY
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
其他支持样式,可以使用jqueryui
https://jqueryui.com/animate/
js 动画提示数据有变化的更多相关文章
- js动画--透明度变化
对于设置元素的透明度的变化.主要思想也是通过一个定时器来控制的. 此外对于透明度有一点要说明一下,就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中v ...
- ACE.js自定义提示实现方法
ACE.js自定义提示实现方法 时间 2015-11-19 00:55:22 wsztrush's blog 原文 http://wsztrush.github.io/编程技术/2015/11/0 ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- 原生js动画效果(源码解析)
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
随机推荐
- Java的单例模式(singleton)
为什么需要单例?只因为国家的独生子女政策(当然现在可以生2个) 单例是一个很孤独的物种,因为它的类里面做多只有也仅只有它一个. 常见的是懒汉及饿汉模式, 1.懒汉,为什么这么叫,看看英文,原为lazy ...
- Fluent_Python_Part4面向对象,09-pythonic-obj,Python风格的对象
第四部分第9章,Python风格的对象 这一章接第1章,说明常见的特殊方法实现. 本章包括以下话题: 支持用于生成对象其它表示形式的内置函数(如repr().bytes(),等等) 使用一个类方法实现 ...
- HDU1024 Max Sum Plus Plus (优化线性dp)
Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To be a brave ACMer, we ...
- 【原】Django问题总结
一:python manage.py makemigrations No changes detected 在修改了models.py后,有些用户会喜欢用python manage.py makemi ...
- 使用Gogs搭建自己的Git服务--windows
Gogs介绍 官方网站:传送门... 使用Gogs可以搭建一个自己的私有Git服务. 有时候我们有一些有些不想公开的私人小项目或者练习项目,源码想放在GitHub.码云(一直觉得这名字有点蹭知名度)这 ...
- Python语言——列表生成式
生成[1x1, 2x2, 3x3, ..., 10x10]列表: >>> L = [] >>> for x in range(1, 11):... >> ...
- Python基础入门语法1
PY的交换值的方法 x.y = y.x PY既具有动态脚本的特性,又有面向对象的特性 PY的缺点: 编译型的语言(C++,C):通过编译器进行编译成机器码,越接近底层,开发效率低 解释型代码:PY和J ...
- 「CF197B Limit」
题目撞名 题目大意: 给出两个函数 \(P(x),Q(x)\). \(P(x)=a_0 \times x^N+a_1 \times x^{N-1}+a_2 \times x^{N-2} \cdots ...
- SpringSecurity配置,简单梳理
生活加油:摘一句子: “我希望自己能写这样的诗.我希望自己也是一颗星星.如果我会发光,就不必害怕黑暗.如果我自己是那么美好,那么一切恐惧就可以烟消云散.于是我开始存下了一点希望—如果我能做到,那么我就 ...
- GSS系列题解——最大子段和系列
开坑啦! 2019 3/28 以前一直不知道怎么搞最大子段和,如今终于可以学习,其实真的很简单啊. 2019 3/29 树链剖分上最大子段和也OK啦 前置技能:线段树 题目大意:询问区间[l,r]的最 ...