复习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先append，然后fadeOut，再fadeIn;

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

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

实例练习2：

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

测试一下：

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

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

试试下面这样：

实例练习3：

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

测试一下：

 结果是：变现正常。

如果这样呢：

实例练习4：

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

继续测试：

 结果也是与预期效果一致，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);

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

自然修改成下面这样：

实例练习6：

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

 结果：正常了。

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

实例练习7：

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

结果是：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});

实例练习9：

复习css3的部分属性和jquery的queue方法,古老的榕树,5-wow.com