jQuery Animation实现CSS3动画示例介绍_jquery

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()

时间: 2024-11-29 03:55:10

jQuery Animation实现CSS3动画示例介绍_jquery的相关文章

jquery JSON的解析方式示例介绍_jquery

这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {

jQuery中$.fn的用法示例介绍_jquery

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQue

JQuery下拉框应用示例介绍_jquery

实现两个下拉框数据移动,追加 复制代码 代码如下: $('#add').click(function(){ var $options = $('#select1 option:selected'); //获取选中的项 var $remove = $options.remove(); $remove.appenTo('#select2'); }); 简化如下 复制代码 代码如下: $('#add').click(function(){ var $options = $('#select1 opti

jQuery中$.fn的用法示例介绍

jQuery中$.fn的用法示例介绍 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc();  jQuery为开发插件提拱了两个方法,分别是:  jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn

47 个 惊人的 CSS3 动画示例

本文介绍47个令人咋舌的CSS3动画演示汇编.他们展示了CSS3的转换和过渡性的处理.有些是非常有用的,可以作为浏览器的替代品使用.这些效果大多是简单的,看起来很酷.为了尝试这些效果,你需要的WebKit浏览器,如Safari和Chrome. CSS3 Clock With jQuery Analogue Clock 3D Cube That Rotates Using Arrow Keys Multiple 3D Cubes (Slide In/Out) CSS3 Accordion Auto

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

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

JQuery入门—JQuery程序的代码风格详细介绍_jquery

<jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格.  1.1.5 jQuery程序的代码风格 1."$"美元符的使用 在jQuery程

jQuery常见的选择器及用法介绍_jquery

选择器的意义就是将众多html代码中准确的找出我们想找的单元. 接下来将常见的选择器以及作用列举出来. 基本选择器 $('#test1').css('background' , 'gray'); 可以找到id = test1的单元. $('p').css('background' , 'blue'); 所有的P标签都会被选中. $('.test2').css('background' , 'green'); Class = test2的单元全部被选中. $('*').css('backgroun

jQuery使用animate创建动画用法实例_jquery

本文实例讲述了jQuery使用animate创建动画用法.分享给大家供大家参考.具体如下: animate的用法: animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数. 实例运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.