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的更多相关文章

  1. jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

    $("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...

  2. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  3. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  4. jQuery之animate()用法

    最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下. 概述 animate() 方法执行 CSS 属性 ...

  5. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

  6. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  7. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  8. jquery之 animate()方法详解

    jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...

  9. jquery animate 动画效果使用说明

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性 ...

  10. .animate动画

    .animate(params, [duration], [easing], [callback]) params: 结果样式属性 duration: 动画时长 也可以用 slow normal fa ...

随机推荐

  1. Akka实践一些总结

    最近在一些服务中使用了akka,主要用来做异步解耦和本地消息分发(路由),这里简单总结一下用法. 与spring集成 网上有不少集成的例子,要使用到spring的扩展. 我这边没有这样处理,而是简单把 ...

  2. .Net Core 权限验证与授权(AuthorizeFilter、ActionFilterAttribute)

    在.Net Core 中使用AuthorizeFilter或者ActionFilterAttribute来实现登录权限验证和授权 一.AuthorizeFilter 新建授权类AllowAnonymo ...

  3. asp.net core系列 57 IS4 使用混合流(OIDC+OAuth2.0)添加API访问

    一.概述 在上篇中,探讨了交互式用户身份验证,使用的是OIDC协议. 在之前篇中对API访问使用的是OAuth2.0协议.这篇把这两个部分放在一起,OpenID Connect和OAuth 2.0组合 ...

  4. WebWorker 中将已处理好的 VDOM 数据提交主线程渲染 DOM

    上篇文章讲了 WebWorker 的简单用法,其实网上很多类似的文章,我写的也比较垃圾.不会的建议可以网上看比较好点的资料. 这里我会先讲下我的大致思路.然后会贴上一堆不实用的垃圾代码供参考. Web ...

  5. 工厂模式讲解, 引入Spring IOC

    目录 引入 简单工厂 抽象工厂 Spring的bean工厂 模拟Spring工厂实现 模拟IOC 引入 假设有一个司机, 需要到某个城市, 于是我们给他一辆汽车 public class Demo { ...

  6. Android项目中独立Git项目分库后的编译调试时Gradle的配置

    基于AS开发项目,对于特定的功能模块,往往抽取成独立的库进行管理,然后上传到Marven库中,通过Gradle依赖的方式进行引用. 其优势体现在: 1,独立的Git项目库,模块功能,及职责界定清晰: ...

  7. 为什么Eureca Client要分成服务提供者和服务消费者呢?

    [学习笔记]转载 6)为什么Eureca Client要分成服务提供者和服务消费者呢? 通 常来讲,服务提供方是重量的耗时的,所以可能在n台机器上.而服务消费方是轻量的,通过配置ribbon和@Loa ...

  8. ArcGIS Engine 笔记-控件类型

    控件 MapControl Map         地图控件 PageLayouControl      布局地图控件 TOCControl                目录控件 ToolbarCo ...

  9. 瑞芯微发布最新旗舰应用处理器-RK3588

    在瑞芯微电子第四届“开发者之春”大会上,瑞芯微推出了新一代8nm旗舰处理器-RK3588 这个芯片将采用8nm 制程工艺.基于A76+A55 内核组合,具备4K UI性能.8K VPU,拥有NPU2. ...

  10. supervisord 备注

    最近项目中使用了supervisord,简单做下备注. supervisord是linux下基于python开发的一个服务管理工具,类似之前node环境下的forever,用该方法启动进程后,supe ...