jQuery Animation实现CSS3动画示例介绍

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。详细用法请参考jQuery 效果 - animate()方法和官方教程。

像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。

如果我们自己用JavaScript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个step参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。请看transform例子:


代码如下:

<div id="box"></div>
#box {
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:red;
}

$('#box').animate({ textIndent: 0 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
},
duration:'slow'
},'linear');

这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。以此类推，我们就可以实现很多效果了。具体例子请参考这里

参考文档
•jQuery 效果 - animate() 方法
•.animate()

赞 (0)

相关推荐

  • 从零开始学习jQuery (七) jQuery动画实现 让页面动起来

    从零开始学习jQuery (七) jQuery动画实现 让页面动起来

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单! 二.前言 本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢,  有了扎实的基础凭借每

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • jQuery动画与特效详解

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("input:first").click(function() {                     $("p").hide();

  • 基于JQuery的数字改变的动画效果--可用来做计数器

    因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的JQuery,把里边的效果全试了试,最后选用了animate自定义,代码如下: 复制代码 代码如下: <html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) { //n设为想要改成的数字 $(function () { $("

  • JQuery中解决重复动画的方法

    下面我们就来总结一下几个JQuery中解决重复动画的办法 ,这里有几个常见的动画效果,它们分别是:图片滚动轮播,回到页面顶部,联级菜单滑出,手风琴. 图片滚动: $("#banner-min-img1").mouseover(function (){ $("#banner-img").animate({left:"0px"},300)} $("#banner-min-img2").mouseover(function (){

  • jQuery实现加入购物车飞入动画效果

    jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码 代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码 代码如下: <

  • JQuery动画和停止动画实例代码

    JQuery动画和停止动画实例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:

  • jQuery下的动画处理总结

    queue()/ dequeue()这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知.这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码 复制代码 代码如下: $('#test').animate({            "width": "300px",            "height": "300px",            "opacity":&qu

随机推荐