jquery点击控制动画暂停开始
一下是从w3c上面考下来了的，
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*
独立属性
[ animation-name ]：检索或设置对象所应用的动画名称
[ animation-duration ]：检索或设置对象动画的持续时间
[ animation-timing-function ]：检索或设置对象动画的过渡类型
[ animation-delay ]：检索或设置对象动画延迟的时间
[ animation-iteration-count ]：检索或设置对象动画的循环次数
[ animation-direction ]：检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]：检索或设置对象动画的状态。
一下是代码部分：写的比较简单，也没有考虑浏览器兼容问题了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>vertical-align</title>
</head>
<style>
.wap{width:200px;height:200px;background:red;}
.move{animation:move 3s ease 0s infinite alternate;}
@keyframes move{
0%{opacity:0;transform:rotate(0deg);}
50%{opacity:0.5;transform:rotate(90deg);}
100%{opacity:1;transform:rotate(180deg);}
}
</style>
<body>
<div class="wap move" onclick="run()"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var flag = true; //用作标志
function run(){
if(flag==true){
$('.move').css('animation-play-state','paused'); //设置动画状态--暂停
flag = false;
}else{
$('.move').css('animation-play-state','running');//设置动画状态--开始
flag = true;
}
}
</script>
</body>
jquery点击控制动画暂停开始的更多相关文章
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- 测开之路一百零一：jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- WPF控制动画开始、停止、暂停和恢复
1.闲言 好久也没更新一博客了,自己有点发懒,同时确实这几个月来也有点忙.风机监测软件,项目中,有这样一个小需求:正常风机在旋转的时候,上位机软要做一个风机的图片,让它不停地旋转,一但检测到下面风机停 ...
- CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...
- 第4章 jQuery的事件和动画（二）
二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
- 给tabBarItem加点击效果动画
获取到tabBarItem,添加喜欢的动画 .h文件 @interface JGTabBarController () //记录上一次点击tabbar @property (nonatomic, as ...
- JQuery：选择器、动画、AJAX请求
选择器 1.事件编程与动画效果 一个选择器可以在概念上理解为指针.借助与JQuery库中的选择器$,线程可以获取到界面元素的引用,从而可以调用 ready().click()方法把用户事件和动作方法关 ...
随机推荐
- jquery easyui的扩展验证
1.扩展通过$.extends($.fn.validatebox.defaults.rules,)扩展 $.extend( $.fn.validatebox.defaults.rules, { idc ...
- HDU4570----Multi-bit Trie----简单的DP
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4570 题目意思: 给你N个数 要你分成多段,每段长度不能超过20 是的sum(ai*(2^bi))最小 ...
- HDU 4462 Scaring the Birds （暴力求解，二进制法）
题意:给定一个 n*n的矩阵,在一些位置放上稻草人,每个稻草人的范围是一定,问你最少几个能覆盖整个矩阵. 析:稻草人最多才10个,所以考虑暴力,然后利用二进制法,很容易求解,并且时间很少0ms,注意有 ...
- 高扩展的基于NIO的服务器架构
当你考虑写一个扩展性良好的基于Java的服务器时,相信你会毫不犹豫地使用Java的NIO包.为了确保你的服务器能够健壮.稳定地运行,你可能会花大量的时间阅读博客和教程来了解线程同步的NIO selec ...
- VBA在Excel中的应用（一)：改变符合条件单元格的背景颜色
在使用excel处理数据的时候,为了能更清晰的标示出满足特定条件的单元格,对单元格添加背景色是不错的选择.手工处理的方式简单快捷,但是当遇到大批量数据,就会特别的费时费力,而且不讨好(容易出错).通过 ...
- MFC 视图、文档、框架（通讯）
CMainFrame * pMainWnd=(CMainFrame*)AfxGetApp()->m_pMainWnd;//主框架 CChildFrame * pChild = (CChildFr ...
- MVC4学习过程记录
终于决定开始尝试Web开发,即是为了工作也是为了自己的兴趣,决定还是从MS的MVC4开始. 首先从Asp.Net MVC4入门指南这个系列开始学习(http://www.cnblogs.com/pow ...
- c# socket通信较完善方案
c#的socket通信应用.文件较多.附件为工程. core AbstractBytesWorker.cs 字节工作器(基类),用于用于同一不同功能的字节工作器 BinaryHand.c ...
- delphi Caption 垂直显示标签文本
//垂直显示标签文本 Label1.Caption:='垂'+#13+'直'+#13+'显'+#13+'示';//使用相同的方法,我们也可以制作垂直显示的提示(Hint):button1.Hint:= ...
- 图的深度优先搜索算法DFS
1.问题描写叙述与理解 深度优先搜索(Depth First Search.DFS)所遵循的策略.如同其名称所云.是在图中尽可能"更深"地进行搜索. 在深度优先搜索中,对最新发现的 ...