css3 js插件,模拟CSS3动画的js插件-move.js|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库...-CSDN博客

Move#set(prop, val)

Set prop to val.

Play

move('#example-1 .box')

.set('margin-left', 200)

.end();

Move#add(prop, val)

Increment prop by val, where val

is an Number (click several times).

Play

move('#example-2 .box')

.add('margin-left', 200)

.end();

Move#sub(prop, val)

Decrement prop by val, where val

is an Number (click several times).

Play

move('#example-3 .box')

.sub('margin-left', 100)

.end();

Move#rotate(deg)

Rotate by deg.

Play

move('#example-4 .box')

.rotate(140)

.end();

Move#duration(n)

Set animation duration to n which is a

Number or a string such as "4s".

Play

move('#example-5 .box')

.set('background-color', 'blue')

.duration('2s')

.end();

Move#translate(x[, y])

Translate x and optionally y axis. Aliased as Move#to(x[, y]).

Play

move('#example-6 .box')

.translate(300, 80)

.end();

Move#x(n) / Move#y(n)

Translate x or y axis. Aliased by Move#translateX(n) and Move#translateY(n).

Play

move('#example-7 .box')

.x(300)

.y(20)

.end();

Move#skew(x[, y])

Skew x, and optionally y. Move#skewX(n) and Move#skewY(n) are also available.

Play

move('#example-8 .box')

.x(300)

.skew(50)

.set('height', 20)

.end();

Move#scale(x[, y])

Scale the x, and optionally y axis. Move#scaleX(n) and Move#scaleY(n) are also available.

Play

move('#example-9 .box')

.scale(3)

.end();

Move#ease(fn)

Use the given easing fn.

Play

default

out

in-out

snap

(0,1,1,0)

move('#example-10 .box1').x(400).end();

move('#example-10 .box2').ease('in').x(400).end();

move('#example-10 .box3').ease('out').x(400).end();

move('#example-10 .box4').ease('in-out').x(400).end();

move('#example-10 .box5').ease('snap').x(400).end();

move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end();

setTimeout(function(){

move('#example-10 .box1').x(0).end();

move('#example-10 .box2').x(0).end();

move('#example-10 .box3').x(0).end();

move('#example-10 .box4').x(0).end();

move('#example-10 .box5').x(0).end();

move('#example-10 .box6').x(0).end();

}, 1200);

Move#end([fn])

The end() method triggers the animation

to play, optionally invoking the callback fn when complete.

Play

move('#example-11 .box')

.set('background-color', 'red')

.duration(1000)

.end(function(){

move('#example-11 .box')

.set('background-color', 'white')

.end();

});

Move#delay(n)

Set animation delay to n which is a

Number or a string such as "4s".

Play

move('#example-12 .box')

.set('background-color', 'blue')

.delay('2s')

.end();

Move#then([fn])

Defer an action such as invoking a fn,

end()ing the given Move instance,

or returning a clone for chaining. The Move#pop() method is used to return the current Move instance's parent in the chain.

Play

var moveBack = move('#example-13 .box')

.set('background-color', 'white')

.x(0);

move('#example-13 .box')

.set('background-color', 'red')

.x(500)

.then(moveBack)

.end();

move('#example-13 .box2')

.set('background-color', 'red')

.x(500)

.scale(.5)

.rotate(60)

.then()

.rotate(30)

.scale(1.5)

.set('border-radius', 5)

.set('background-color', 'white')

.then()

.set('opacity', 0)

.pop()

.end();

move.select(selector)

This function is used throughout move to select elements. For

example if we wanted to utilize jQuery, we could re-define

this function as shown below.

move.select = function(selector){

return $(selector).get(0);

};

move.defaults

Defaults used throughout Move, simply re-define to apply a new default.

move.defaults = {

duration: 500

};

move.ease

Easing function map, used by Move#ease() to

allow for move('foo').ease('in') etc.

move.ease = {

'in': 'ease-in'

, 'out': 'ease-out'

, 'in-out': 'ease-in-out'

, 'snap': 'cubic-bezier(0,1,.5,1)'

};

move.version

The library version in the form "MAJOR.MINOR.PATCH".

move.version = "n.n.n";