一款模拟CSS3动画的js插件-move.js A CSS3 JavaScript animation framework

jQuery之家 返回下载页

Move.js是一款简单小巧的模拟CSS动画的javascript插件。

Examples

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
in
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()
      .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";