Review the partial attributes of CSS3 and the queue method of jquery

Using CSS3 to achieve the 1.5-month watermelon, using the queue to achieve the animation of eating watermelon. Practice examples

CSS3:

1. Rounded Corners

border-radius:100%;

border-top-left-radius:5px;

2. Deformation

Rotation: Transform:rotate (25deg);(positive angle is clockwise, negative angle is counterclockwise).

3D Rotation: Transform:rotatex (25deg),-----effect for div is smaller, 90deg height is 0.

3D Rotation: Transform:rotatey (25deg),-----effect for the width of the div is smaller (left and right border at the same time), 90deg width of 0.

Zoom: Transform:scale (1,0.5), or Transform:scalex (1); Transform:scaley (0.5);

Mobile: Transform:translate (20px,-10px), or Transform:translatex (20px), or Transform:translatey ( -10px);

Tilt: Transform:skew (10deg,20deg), or transform:skewx (10deg), or Transform:skewy (20DEG);

3. Animation

animation How to use:

3.1. Use @keyframes to define animation effects:

@keyframes  animatename{  0%      {(multiple) CSS rules;} ------necessary to indicate the effect of the animation at the beginning  30%    {;} ------Non-essential, indicating the effect after 3/10 of the entire animation time (one cycle)  100%  {;} ------Necessary (when only 0% and 100% can be substituted with from and to), indicating the effect at the end of the animation}

3.2. Use animations on a node and define the following properties of the animation, such as

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

which

The speed curve of the animation animation-timing-function (default is ease, commonly used as linear)

、

If you want to perform an animation indefinitely, define Animation-iteration-count as "infinite".

The default value for Animation-direction is "normal", which means that the animation is played normally.

"Alternate" means that the animation is played in reverse, that is, the animation plays normally in odd number of times (1, 3, 5, and so on) and plays backwards in an even number of times (2, 4, 6, and so on).

Animation-play-state can control animation pause paused or (continue) execution: running.

Control these attributes in JS:

document.getElementById (' id '). style. Webkitanimationplaystate= ' paused ';

Defined in style:

<stylepaused;-webkit-animation-play-state:paused; ' >

Attention:

Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.

Chrome and Safari need a prefix of-webkit-.

Queue

Queue is primarily used to add functions (animation effects) to the function queue on an element (the default name is FX).
This allows the dequeue to take out and execute the first function in the function queue (that is, the function that first enters the function queue).
Delay can defer execution of the function queue on the element.

The animated effects of jquery, such as animation (), show (), Slideup (), fadeIn () and so on I think its effect is to add a function to the FX queue with a queue and then call it with Dequeue.

Queue related usage:

. Queue (QueueName): function queue on an element

. Queue (Queuename,newqueue): Replace QueueName with Newqueue, so. Queue (queuename,[]) is the stop animation.

. Queue (Queuename,callback): QueueName After the execution of the callback function, it ignores the subsequent QueueName animation function

. Clearqueue (QueueName): Empty (remaining) function queue, the function that is executing will continue

. Dequeue (QueueName): Takes out and executes the first function in a function queue

. Delay (Time,queuename): Perform functions in queuename after time (in milli-units)

Note: The above ignore queuename is the default ' FX '

. Stop () or. Stop (false): Skips the function that is executing and immediately runs the next animation function

. Stop (true): Stop Animation now

. Stop (False,true): Immediately jumps to the end state of the current function and begins execution of the next function.

However, stop () can only empty the animation queue and cannot empty all queues (Clearqueue) created through. Queue ().

The queue is also used in the animation:
. Animation (Params,options):
Params:: A set of style attributes and their values that contain the animated and final values
Options: Additional options for animations. As commonly used are:
Duration/speed-Sets the duration of the animation;
Easing-Specifies the easing function to be used, jquery only provides swing (default) and linear, to download plugins with other needs,
Various effects can be viewed in http://james.padolsey.com/demos/jquery/easing/;
Callback-Specifies the function to be executed after the animation is completed;
Queue -boolean value. Indicates whether the animation is placed in the effect queue. If False, the animation will start immediately (if there is currently an animation function in progress, it will be executed at the same time)

Take a look at the example exercises:

Refer to the advanced usage of jquery animations (above)--detailed in animation. Queue () function

We know that if this is the case:

$ (' #id1 '). FadeOut (' slow '). FadeIn (' slow ');

The result: ID1 will disappear first and then appear again.

To achieve the effect that disappears first and then another div appears, if so write:

Example Exercise 1:

$ (' #id1 '). FadeOut (' slow '). AppendTo ($ (' #rightC ')). FadeIn (' slow ');

Id1

The result is: ID1 first append, then fadeout, then Fadein;

Why is it not executed in the order in which the code is written?

The reason is that non-animated functions on the element (such as changing CSS or append, etc.) are automatically performed before the animation function.
To change this, we can artificially add non-animated functions to the function queue, and then execute it.
Modified to:

Example Exercise 2:

$ (' #id1 '). FadeOut (' slow ')         . Queue (function() {$ (this). AppendTo ($ ('#rightC);})         . FadeIn (' slow ');

Test it:

Id1

The result Id1 disappeared, by looking at the source code can be found append also executed, but Fadein did not execute, why? Look at the previous "Queue related usage " to know.

How can the modification achieve the desired effect?

Try this:

Example Exercise 3:

$ (' #id1 '). FadeOut (' slow ')         . Queue (function() {$ (this). AppendTo ($ ('# RIGHTC '). Dequeue ();})         . FadeIn (' slow ');

Test it:

Id1

The result is: it turns out normal.

If it does:

Example Exercise 4:

$ (' #id1 '). FadeOut (' Slow ').         Queue (function() {$ (this). AppendTo ($ (' #rightC ')). Dequeue ();})         . FadeIn (' slow ')         . FadeOut (' slow ');

To continue testing:

Id1

The result is also consistent with the expected effect, even if there is no. dequeue () After the end of the Fadein, the next animation function executes itself.

Let's look at another example:

Instance:
Also from the advanced usage of jquery animations (top)--detailed in the. Queue () function in animation

A div style is:
#object {position:absolute;width:200px;height:200px;top:100px;left:0;background:blue;}

Now to achieve this effect:
In 2s the top is changed from the default 100px to 60px, and in that 2s after 1s opacity by the default of 1 slowly into 0.

The first thing I think about is:

Example Exercise 5:

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

Object

Results: There was a noticeable pause between 1s and 2s, and the overall upward movement was not uniform.

Naturally modify it to the following:

Example Exercise 6:

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

Object

The result: normal.

In a different way:
Top does not split into two parts, but sets the opacity to run at the same time after one second.

Example Exercise 7:

$ ("#object"). Delay (+). Queue (function() {    $ (thisfalse "-=40"}, {duration:2000}); 

Object

The result: Opacity and top were started at the same time after 1s, which did not meet the requirements.

The reason is easy to understand: Delay is for ' FX ', the queue is adding function members immediately to ' FX ' and running, Animate is also a member of ' FX '. So in order to only delay the animation effect of transparency, it must be distinguished from ' FX '.

Example Exercise 8:

$ ("#object"). Delay (' fade '). Queue (' fade ',function() {    $ (this  false"-=40"}, {duration:2000});

Object

Example Exercise 9: