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. TensorFlow读写数据

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 从零开始学TensorFlow[01-搭 ...

  2. vue学习笔记4

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = ne ...

  3. ASP.NET Aries 高级开发教程:Excel导入之代码编写(番外篇)

    前言: 以许框架提供的导入配置功能,已经能解决95%以上的导入情况,但有些情况总归还是得代码来解决. 本篇介绍与导入相关的代码. 1.前端追加导入时Post的参数: var grid = new AR ...

  4. new Date()传参的浏览器兼容性

    测试以下是在IE9的测试情况 可以看到IE9不支持new Date('2018-1-2')和new Date('123456'),但是支持new Date('2018-01-02').new Date ...

  5. 缓存穿透,缓存雪崩,热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  6. 【TensorFlow篇】--反向传播

    一.前述 反向自动求导是 TensorFlow 实现的方案,首先,它执行图的前向阶段,从输入到输出,去计算节点值,然后是反向阶段,从输出到输入去计算所有的偏导. 二.具体 1.举例 图是第二个阶段,在 ...

  7. Got permission denied while trying to connect to the Docker daemon socket at

    添加新用户后执行docker命令由于没权限出现以下报错: ”Got permission denied while trying to connect to the Docker daemon soc ...

  8. ConfirmCancelUtilDialog【确认取消对话框封装类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对确认取消对话框的封装. 前提:调用对话框的Activity必须继承FragmentActivity及其子类(比如AppCompat ...

  9. okhttputils【 Android 一个改善的okHttp封装库】使用(二)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 上一篇讲了如何在项目中导入OKHttputils库的操作,这一篇主要讲常见请求的写法. get请求 public String getPe ...

  10. ToolbarDemo【Toolbar作为顶部导航栏的简单使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录ToolBar作为导航栏的使用.关键点在于如何在dialogfragment中使用toolbar! Toolbar的图标.标 ...