复习css3的部分属性和jquery的queue方法

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画。练习例子

css3:

1、圆角

border-radius:100%;

border-top-left-radius:5px;

2、变形

2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针)。

3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0。

3D旋转:transform: rotateY(25deg);-----效果为div的宽度变小(左右border同时内缩),90deg时宽度为0。

缩放:transform:scale(1,0.5);或transform:scaleX(1);或transform:scaleY(0.5);

移动:transform:translate(20px,-10px);或transform:translateX(20px);或transform:translateY(-10px);

倾斜:transform:skew(10deg,20deg);或transform:skewX(10deg);或transform:skewY(20deg);

3、动画

animation使用方法:

3.1、利用@keyframes定义动画效果:

@keyframes  animateName{
  0%      {(多个)css规则;}------必备,表示动画开始时的效果
  30%    {;}------非必备,表示经过了整个动画时间(一个周期)的3/10后的效果
  100%  {;}------必备(当只有0%和100%是可以用from和to代替),表示动画结束时的效果
}

3.2、在某节点上使用动画,同时定义动画的下列属性,如

div{animation:animateName 2s linear 1s 3;}

其中:

动画的速度曲线animation-timing-function(默认值为ease,常用的为linear)

如果要无限次执行动画,则定义animation-iteration-count为"infinite"。

animation-direction的默认值为"normal"表示正常播放动画,

"alternate"则表示轮流反向播放动画,即动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

animation-play-state可控制动画暂停paused或(继续)执行:running。

在js中控制这些属性:

document.getElementById(‘id1‘).style.animationPlayState=‘paused‘; document.getElementById(‘id‘).style.WebkitAnimationPlayState=‘paused‘;

在style中定义:

<div style=‘animation-play-state: paused;-webkit-animation-play-state: paused;‘>

注意:

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

queue:

queue主要用于给元素上的函数队列(默认名为fx)添加函数(动画效果),
这样dequeue就可以取出并执行函数队列中的第一个函数(即最先进入函数队列的函数),
delay则可以延迟元素上函数队列的执行。

jquery的动画效果,如animation()、show()、slideUp()、fadeIn()等在我看来它的效果就是用queue给fx队列添加一个函数,然后用dequeue调用了它。

queue相关用法:

.queue(queueName):元素上的函数队列

.queue(queueName,newQueue):用newQueue替换掉queueName,所以.queue(queueName,[])即为停止动画。

.queue(queueName,callback):queueName执行完后的回调函数,它会忽略后续queueName的动画函数

.clearQueue(queueName):清空(剩余)函数队列,正在执行的那个函数会继续

.dequeue(queueName):取出并执行函数队列中的第一个函数

.delay(time,queueName):过time(单位为毫妙)后才执行queueName中的函数

注:以上忽略queueName是即为默认的‘fx‘

.stop()或.stop(false):跳过正在执行的那个函数,立马运行下一个动画函数

.stop(true):立即停止动画

.stop(false,true):立即跳到当前函数的结束状态,开始执行下一个函数。

但是stop()只能清空动画队列,不能清空所有通过 .queue() 创建的队列(clearQueue可以)。

animation中也用到了queue:
.animation(params,options):
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如常用的有:
duration/speed - 设置动画持续的时间;
easing - 规定要使用的 easing 函数,jquery只提供了swing(默认值)和linear,要用别的需要下载插件,
可在http://james.padolsey.com/demos/jquery/easing/查看各种效果;
callback - 规定动画完成之后要执行的函数;
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始(如果当前有正在执行的动画函数,则它会与之同时执行)

来看看实例练习:

参考jQuery动画高级用法(上)——详解animation中的.queue()函数

我们知道如果这样:

$(‘#id1‘).fadeOut(‘slow‘).fadeIn(‘slow‘);

结果是:id1会先消失,然后再出现。

若要达到先消失,然后再另一个div里出现的效果,如果这样写:

实例练习1:

$(‘#id1‘).fadeOut(‘slow‘).appendTo($(‘#rightC‘)).fadeIn(‘slow‘);

id1

结果是:id1先append,然后fadeOut,再fadeIn;

为什么没有按代码书写的顺序执行呢?

原因是元素上的非动画函数(如改变css或是append等)就是会自动先于动画函数执行。
为了改变这种情况,我们可以人为的把非动画函数也加入函数队列,然后执行它就可以了。
修改为:

实例练习2:

$(‘#id1‘).fadeOut(‘slow‘)
         .queue(function(){$(this).appendTo($(‘#rightC);})
         .fadeIn(‘slow‘);

测试一下:

id1

结果id1消失了,通过查看源代码可以发现append也执行了,但是fadeIn却没有执行,为什么呢?看前面的“queue相关用法”就知道了。

怎样修改能达到预期效果呢?

试试下面这样:

实例练习3:

$(‘#id1‘).fadeOut(‘slow‘)
         .queue(function(){$(this).appendTo($(‘#rightC‘)).dequeue();})
         .fadeIn(‘slow‘);

测试一下:

id1

结果是:变现正常。

如果这样呢:

实例练习4:

$(‘#id1‘).fadeOut(‘slow‘)
         .queue(function(){$(this).appendTo($(‘#rightC‘)).dequeue();})
         .fadeIn(‘slow‘)
         .fadeOut(‘slow‘);

继续测试:

id1

结果也是与预期效果一致,fadeIn结束后即使没有.dequeue(),后一个动画函数也会自己执行。

再来看另一个实例:

实例:
同样来自jQuery动画高级用法(上)——详解animation中的.queue()函数

一个div样式为:
#object{position:absolute;width:200px;height:200px;top:100px;left:0;background:blue;}

现在要达到这样的效果:
在2s内top由默认的100px均匀变为60px,并且在那2s的后1s内opacity由默认的1慢慢变为0。

我首先想到的是:

实例练习5:

$(‘#object‘).animate({top:‘-=20‘},1000)
            .animate({top:‘-=20‘,opacity:0},1000);

object

结果:在第1s到第2s之间有明显的停顿,整体的向上移动并不是匀速的。

自然修改成下面这样:

实例练习6:

$(‘#object‘).animate({top:‘-=20‘},{duration: 1000, easing: ‘linear‘})
   .animate({top:‘-=20‘,opacity:0},{duration: 1000, easing: ‘linear‘});

object

结果:正常了。

换一种方法:
top不拆成两部分,而是设置一秒以后同时运行opacity。

实例练习7:

$("#object")
.delay(1000)
.queue(function() {
    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});

object

结果是:1s以后同时开始了opacity和top,这不符合要求。

原因很容易理解:delay针对的是‘fx‘,queue是立马添加函数成员到‘fx’并运行,animate也是‘fx‘中的成员。所以为了仅仅delay变化透明度的动画效果,必须把它和‘fx‘区分开来。

实例练习8:

$("#object")
.delay(1000,‘fade‘)
.queue(‘fade‘,function() {
    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});

object

实例练习9:

复习css3的部分属性和jquery的queue方法

时间: 2024-10-07 05:36:12

复习css3的部分属性和jquery的queue方法的相关文章

复习css3的部分属性

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变形 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针). 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0. 3D旋转:transform: rotateY(25deg);-----效果为

html5的自定义data-*属性和jquery的data()方法的使用示例

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式 十六进制方式(#FF0000,#B9B9B9等) rgb方式 三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

CSS3的transform属性

CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年.所以有一些东西还需要及时整理. 下面说一下CSS3的一个属性:transform 其实字面上的意思已经很明显了就是变化,变幻的意思. 那到底怎么个变法? transform可以选下面几个值: 旋转-rotate(rotatex,rotatey) 倾斜-skew 缩放-scale 移动-translate 下面给出的例子可能都非常简单,真正详细的还是看W3School毕竟是定期更新的 1.rotate a.rotate{

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

如何理解 css3 的 perspective 属性

一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 纳尼?这是3D?怎么一点也不酷呢? 二.让3D效果显示出来 看不到3D效果,那是因为我们没有加上 prespective 属性,我们在外层DIV上加上 prespective: 50; ,再狠狠的点这里来看看旋转和位移的效果. 你应该会看到这样的效果: 是不是有