animate-queue和step-animate
Step-animate:
分为3部分:{配置},{step:function(){...},duration:1000}
<div id="warpper" style="width: 50px;height: 100px;position: absolute;top: 10%;left: 45%;background: green;">
</div>
<script type="text/javascript">
$(function(){
$("#warpper").animate(
{
// 即使opacity只是配置,但opacity依旧有动画效果,会从0增长
opacity: "0.5",
// 自定义配置:数字配置,会从0增长
rotate: "125",
// 自定义配置:从0变成Na
// 最后一个配置后面 不能有 ;
background: "red"
// step有2个参数 当前值:now 和 fx
},{step:function(now,fx){
$(this).css("transform","rotate("+now+"deg)");
// 利用 fx.prop 获取配置的 rotate 进行判断
// now有15个小数位,所以最好解析成 Int 类型
if(fx.prop == "rotate" && parseInt(now) < 47 && parseInt(now) > 43){
// animate 不能控制颜色! 所以要么用step 要么用 queue。
$(this).css("background","red");
// fx.elem.id :fx能获取 元素(elem)的ID属性
console.log(fx.elem.id);
// 获取配置的初试结束值
console.log(fx.start + " - " + fx.end);
}
// 设置动画持续时间
// 持续时间最后面不能有 ;
},duration:1000
}
);
})
</script>
通过 queue删除动画 队列, 用 dequeue继续动画
$("#warpper").click(function() {
$("div").show("slow").animate({
left: '+=200'
}, 1000).queue(function() {
$(this).addClass("newcolor");
$(this).dequeue();
}).animate({
left: '-=200'
}, 1500).queue(function() {
$(this).removeClass("newcolor");
$(this).dequeue();
}).slideUp();
});
$("#stop").click(function() {
$("div").queue("fx", []); /* 如果有queue那么stop就要加这句*/
$("div").stop();
}); 清空尚未执行的所有队列
$("div").clearQueue();
animate-queue和step-animate的更多相关文章
- jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决
$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- JQuery简单动画效果的发生顺序和animate方法
(1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...
- jQuery之animate()用法
最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下. 概述 animate() 方法执行 CSS 属性 ...
- jQuery中关于如何使用animate自定义动画
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- jQuery animate动画 stop()方法详解~
一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...
- jquery之 animate()方法详解
jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...
- jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...
- .animate动画
.animate(params, [duration], [easing], [callback]) params: 结果样式属性 duration: 动画时长 也可以用 slow normal fa ...
随机推荐
- Akka实践一些总结
最近在一些服务中使用了akka,主要用来做异步解耦和本地消息分发(路由),这里简单总结一下用法. 与spring集成 网上有不少集成的例子,要使用到spring的扩展. 我这边没有这样处理,而是简单把 ...
- .Net Core 权限验证与授权(AuthorizeFilter、ActionFilterAttribute)
在.Net Core 中使用AuthorizeFilter或者ActionFilterAttribute来实现登录权限验证和授权 一.AuthorizeFilter 新建授权类AllowAnonymo ...
- asp.net core系列 57 IS4 使用混合流(OIDC+OAuth2.0)添加API访问
一.概述 在上篇中,探讨了交互式用户身份验证,使用的是OIDC协议. 在之前篇中对API访问使用的是OAuth2.0协议.这篇把这两个部分放在一起,OpenID Connect和OAuth 2.0组合 ...
- WebWorker 中将已处理好的 VDOM 数据提交主线程渲染 DOM
上篇文章讲了 WebWorker 的简单用法,其实网上很多类似的文章,我写的也比较垃圾.不会的建议可以网上看比较好点的资料. 这里我会先讲下我的大致思路.然后会贴上一堆不实用的垃圾代码供参考. Web ...
- 工厂模式讲解, 引入Spring IOC
目录 引入 简单工厂 抽象工厂 Spring的bean工厂 模拟Spring工厂实现 模拟IOC 引入 假设有一个司机, 需要到某个城市, 于是我们给他一辆汽车 public class Demo { ...
- Android项目中独立Git项目分库后的编译调试时Gradle的配置
基于AS开发项目,对于特定的功能模块,往往抽取成独立的库进行管理,然后上传到Marven库中,通过Gradle依赖的方式进行引用. 其优势体现在: 1,独立的Git项目库,模块功能,及职责界定清晰: ...
- 为什么Eureca Client要分成服务提供者和服务消费者呢?
[学习笔记]转载 6)为什么Eureca Client要分成服务提供者和服务消费者呢? 通 常来讲,服务提供方是重量的耗时的,所以可能在n台机器上.而服务消费方是轻量的,通过配置ribbon和@Loa ...
- ArcGIS Engine 笔记-控件类型
控件 MapControl Map 地图控件 PageLayouControl 布局地图控件 TOCControl 目录控件 ToolbarCo ...
- 瑞芯微发布最新旗舰应用处理器-RK3588
在瑞芯微电子第四届“开发者之春”大会上,瑞芯微推出了新一代8nm旗舰处理器-RK3588 这个芯片将采用8nm 制程工艺.基于A76+A55 内核组合,具备4K UI性能.8K VPU,拥有NPU2. ...
- supervisord 备注
最近项目中使用了supervisord,简单做下备注. supervisord是linux下基于python开发的一个服务管理工具,类似之前node环境下的forever,用该方法启动进程后,supe ...