jquery animate改变元素样式时，只支持数字值的变化，比如width，height等，但是css3属性状态值很多都不是数字值，而是字符串和数字混合在一起，比如translate(), rotate()等等，如果要用animate使其支持css3变化，需要用到一个step参数，下面附上小demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="js/jquery-1.12.0.js"></script>

    <style>

        .demo{

            width:100px;

            height:100px;

            border:1px solid red;

        }

    </style>

</head>

<body>

<button>sss</button>

    <div class="demo"></div>

    <script>

        var $elem,applyEffect;

        $elem=$(".demo");

        applyEffect=function($e,v){

            $e.css({

                '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'

                , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'

                , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'

            });

        };

        applyEffect($elem, 100);

        $("button").click(function(){

            $(".demo").animate({

                foo:100

            },{

                step:function(now,fx){

                    //console.log(now); //当前正在改变的属性的实时值

                   //console.log(fx); //jquery默认动画队列的名字

                    //console.log(fx.elem); //执行动画的元素

                    //console.log(fx.prop);  //执行动画的属性    aa

//                    console.log(fx.now);  //正在改变属性的当前值

//                    console.log(fx.end);  //动画结束之   360

                    //console.log(fx.unit);  //改变的属性的单位  px

                    //$(".demo").css({"transform":"rotate("+now+"deg)"});

                    applyEffect($elem, 100-now);

                },

                duration:1000

            });

        });

    </script>

</body>

</html>

　　现在animate第一个参数里，插入一个字段，给到设定好的目标值，然后在step里用css来通过前面给的字段，来动态模拟动画，通过这样间接的方式实现了animate对css3动画的支持.

jquery实现css3动画的更多相关文章

  1. jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...

  2. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  3. jQuery Animation实现CSS3动画

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...

  4. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  5. 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画

    今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性. 个元素来实现鼠标滑动到某个导航的背 ...

  6. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  7. 一款jquery和css3实现的卡通人物动画特效

    之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  8. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  9. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

随机推荐

  1. 初识App安全性测试

    目前手机App测试还是以发现bug为主,主要测试流程就是服务器接口测试,客户端功能性覆盖,以及自动化配合的性能,适配,压测等,对于App安全性测试貌似没有系统全面统一的标准和流程,其实安全性bug也可 ...

  2. CSS3的基础用法

    CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...

  3. [讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得

    [讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得 prerouting 发表于 2010-5-9 16:50:46 https://www.itsk.com/thread-36634- ...

  4. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

  5. solr的增删改查

    solr的配置请查看:http://www.cnblogs.com/byteworld/p/5898651.html 创建Core:(可以复制模版到solrhome\test\conf文件夹中) 简化 ...

  6. 浅谈android binder机制

    binder机制 是谷歌优化在android上更适合终端的IPC(多进程通信方式),满足系统对通信方式,传输性能和安全性的要求. 特性: 1. 用驱动程序来推进进程间的通信.2. 通过共享内存来提高性 ...

  7. d3 scale 学习笔记

    讲解scale 的好材料 https://www.dashingd3js.com/d3js-scales

  8. Guava------------Cache使用方法

    简单从这几个方面描述一下如何使用Cache,对Cache的各种原理介绍此处不涉及. 1.使用场景 2.如何使用Cache 3.创建方式 4. 如何和Spring搭配使用 +-------------- ...

  9. 关于SQLite的伪随机数

    --random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...

  10. (转抄：人人都是产品经理——iamsujie)如何提高产品规划PPT的能力

    做产品几年之后,不可避免的要碰到写规划这件事儿,虽说不少人,不乏大牛,对规划持“无用论”的观点, 但大多数人其实还是更相信这个段子: 在一个公司里,看一个人的地位,主要看他平时写的文档类型——写wor ...