动画 | 易学教程

jQuery---停止动画详解 stop();

阅读更多关于 jQuery---停止动画详解 stop();

停止动画详解 stop(); <!DOCTYPE html> <html lang="zh-CN"> <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> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { $("div").slideDown(4000).slideUp(4000); }); $("input").eq(1).click(function () { //stop:停止当前正在执行的动画 //clearQueue:是否清除动画队列 true false //jumpToEnd:是否跳转到当前动画的最终效果 true false //.stop().animate(); $("div").stop

jQuery---三组基本动画 show hide

阅读更多关于 jQuery---三组基本动画 show hide

三组基本动画 show hide //show不传参数，没有动画效果 $("div").show(); //show(speed) //speed:动画的持续时间可以是毫秒值还可以是固定字符串 //fast:200ms normal:400ms slow:600ms $("div").show(1000); // show([speed], [callback]) 里面放个回调函数 $("div").show(1000, function () { console.log("哈哈，动画执行完成啦"); }) //hide隐藏 $("input").eq(1).click(function () { $("div").hide(); }) 来源： https://www.cnblogs.com/jane-panyiyun/p/12206042.html

JQuery高级笔记

阅读更多关于 JQuery高级笔记

一、JQuery动画 JQuery动画有三种方式显示和隐藏元素 1.默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数: speed：动画的速度。三个预定义的值 ( "slow" , "normal" , "fast" ) 或表示动画时长的毫秒数值 ( 如： 1000 ) easing：用来指定切换效果，默认是 "swing" ，可用参数 "linear" swing：动画执行时效果是先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。 hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 2.滑动显示和隐藏方式 slideDown([speed],[easing],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) 3.淡入淡出显示和隐藏方式 fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed,[easing],[fn]]) 二、JQuery遍历 1.方式一：jq对象.each 语法: jquery对象 . each (

二、Spine学习笔记-基础示例场景

阅读更多关于二、Spine学习笔记-基础示例场景

这里是个人的学习笔记,如有疑问,欢迎指正. 并推荐到[spine官网]进行深入学习(http://zh.esotericsoftware.com/) 准备工作导入spine-unity runtime,同时导入示例.(步骤略) 依次打开以下场景进行查看 The Spine GameObject 这个场景介绍说的大致是 Spine GameObject就是GameObject物体挂载了SkeletonAnimation (or SkeletonRenderer, SkeletonGraphic or SkeletonAnimator)组件. SkeletonAnimation是最常用的组件, 它里面使用了SkeletonData资源.它在资源中用图标标出 SkeletonData管理了spine导入unity的资源文件(.json-动画配置文件, .png-动画图集文件和 .atlas.txt-图集信息文件, 在spine中默认后缀名是.atlas,官方建议修改为.atlas.txt,为了避免unity读取的时候出现问题 ) 了解SkeletonAnimation在inspector面板中的属性 Controlling Animation 此场景示范了基础的动画代码如何使用 SkeletonAnimation.Skeleton.ScaleX = 1; //控制的是X轴的翻转

208 jQuery 效果之显示隐藏

阅读更多关于 208 jQuery 效果之显示隐藏

jQuery 给我们封装了很多动画效果，最为常见的如下：显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法，可以停止动画排队：stop() ; 1.5.1 显示隐藏显示隐藏动画，常见有三个方法：show() / hide() / toggle() ; 语法规范如下: 代码演示 <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1)

CSS 07 转换,过渡,动画

阅读更多关于 CSS 07 转换,过渡,动画

CSS HACK 我们为了兼容不同低版本浏览器,而作的代码开发,叫做编写csshack - webkit- - moz- - ms- - o- 一转换(*****)—transform 改变元素在页面中的位置,大小,角度,形状 transform:transform-function1 transform-function2… 转换属性:transform; 转换函数:2D的4个,3D的一个, 1 2D转换只在x,y轴发生转换 (1)位移 transform:translate(x,y) translate()只写一个值和translateX()作用相同—设置元素在x轴上的位移距离 translateY()设置元素在y轴上的位移距离 (2)缩放 transform:scale(val) ①val>1–放大 ②<0val<1—缩小 ③val<0—反转缩小/放大 scale(v1,v2)分别设置x,y轴的尺寸 scaleX()/scaleY()单独设置x,y轴的尺寸 (3)旋转 transform:rotate(ndeg) n>0顺时针;n<0逆时针 transform-origin:v1 v2 转换原点:①px为单位的数字 ②x%,y%;③关键字:x-left/center/right y-top/center/bottom 旋转会带着坐标轴一起旋转,所以会影响旋转之后位移的位置

Tableview如何实现流畅的展开折叠？

阅读更多关于 Tableview如何实现流畅的展开折叠？

上周做了一个tableview的展开折叠，好久不用，生疏好多，结果各种纠结蛋疼，效果各种不好，索性不弄了，浪了两天之后，周一来了灵感突发，一气呵成，效果感觉还不错，废话不多说，说下具体流程　　1.tableview的style:UITableViewStylePlain（很重要，直接影响动画视觉效果）　　2.通过scrollview的代理控制禁止header悬停，这里就很蛋疼了（万恶的Oc），设置成让他悬停再禁止掉就是为了动画的视觉效果醉了醉了下面是代码 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView == self.tableView) { CGFloat sectionHeaderHeight = 100 * KY_Proportion; //sectionHeaderHeight if (scrollView.contentOffset.y<=sectionHeaderHeight&&scrollView.contentOffset.y>=0) { scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0); } else if (scrollView

原生js实现动画过渡效果

阅读更多关于原生js实现动画过渡效果

原生JS实现动画过渡效果原理一般情况实现动画效果可以采用CSS3里的 transition 属性实现动画过渡。但如果有需求只能采用原生JS的情况下可以采用JS里的定时器功能。当然还有很多可以实现动画效果的方法。因为本人初步接触前端，实力不足这里只讲一下定时器的使用。以固定的时间（极短）每次将CSS样式修改一点，达到视觉上的动画效果，使运动看起来不是特别生硬。定时器使用 var timer = null ; timer = setInterval ( function ( ) { pic . style . width = pic . offsetWidth + speed + "px" ; } } , time ) 这里的 pic 可以是任意元素， speed 则是单位时间 pic 宽度的变换量（速度）， time 是执行一次的时间。当 time 足够小时 pic 就会使宽度的变化以动画形式展现。但是这种情况下 pic 的宽度会一直以 speed 的速度执行下去。我们需要加一个条件，当满足此条件时结束定时器。 var timer = null ； clearInterval ( timer ) ; timer = setInterval ( function ( ) { if ( pic . style . width >= 150 + "px" ) {

Velocity的使用方法

阅读更多关于 Velocity的使用方法

什么是Velocity？ Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和 $.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能。它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。 Velocity的使用步骤 1.导入模块 1.1单独导入velocity.min.js模块 // 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity) // ( 第一个参数为原生js的dom选择器 ) Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 }); // 使用 jQuery 或 Zepto 时 $("#dummy").velocity({ opacity: 0.5 }, {

《JavaEE》第九周day2学习笔记-jQuery高级特性

阅读更多关于《JavaEE》第九周day2学习笔记-jQuery高级特性

一、效果 jQuery提供了丰富的方法来展示元素效果：显示/隐藏、滑动显示/隐藏、淡入淡出、自定义动画方法。（一）显示/隐藏 show([speed,[easing],[fn]])：显示隐藏的元素 hide([speed,[easing],[fn]])：隐藏显示的元素（二）滑动显示/隐藏 slideDown([speed],[easing],[fn])：显示（向下滑动）隐藏的元素 slideUp([speed,[easing],[fn]])：隐藏（向上滑动）显示的元素 slideToggle([speed],[easing],[fn])：通过向上/向下滑动的方式切换显示/隐藏元素（三）淡入淡出 fadeIn([speed],[easing],[fn])：淡入元素 fadeOut([speed],[easing],[fn])：淡出元素 fadeTo([[speed],opacity,[easing],[fn]])：将元素的透明度渐变至指定值opacity fadeToggle([speed,[easing],[fn]])：通过“开关”实现淡入淡出元素（四）动画方法 animate(params,[speed],[easing],[fn])1.8+：用于创建自定义动画的函数，其中params通过{}装载目标样式的属性（类似CSS）。注意，如果需要变化背景颜色

订阅动画