jQuery-animations-tile

A plugin of jQuery-animations that provides tile animations.

Download

Compress
Uncompress

Demo

Tile

Browser Support

jQuery-animations currently supports IE10+, Chrome, Firefox, Safari and Opera.

Options

rows: Number (default: 1)

Sets rows of tiles.

cols: Number (default: 1)

Sets columns of tiles.

effect: String or Array or Function (default: "flyOut")

Sets animations to tiles, multiple for alternate. You can also use a function to calculate which effect to use. The function should be defined like this.

function func(options, row, col) {   return 'effect'; } 

sequent: Boolean (default: true)

Sets the flag determining the animations of tiles run with different delays. It will be duration / tile count.

sequence: String or Array (default: "random")

Sets the sequence method or custom orders to run the animations of tiles. Available methods:

random: random tiles
randomCols: random columns
randomRows: random rows
lr: left to right
rl: right to left
tb: top to bottom
bt: bottom to top
lrtb: left to right and top to bottom
rlbt: right to left and bottom to top
rltb: right to left and top to bottom
lrtb: left to right and top to bottom
lrbt: left to right and bottom to top
tblr: top to bottom and left to right
btrl: bottom to top and right to left
tblr: top to bottom and left to right
tbrl: top to bottom and right to left
btlr: bottom to top and left to right

groups: Number (default: 1)

Sets groups to separate so that tiles of groups have the same delay time.

adjustDuration: Boolean (default: true)

Sets the flag determining the animations of tiles run with different duration. It will try to complete all animations of tiles in duration of entire animation.

Example

Basic usage

$('#want-to-animate').animate('tile', {   rows: 2,   cols: 2 });

Effects

$('#want-to-animate').animate('tile', {   rows: 2,   cols: 2,   effect: [     'flyToUp', // for even tile     'flyToDown fadeOut' // for odd tile   ] });

Effects by function

$('#want-to-animate').animate('tile', {   rows: 2,   cols: 2,   effect: function(options, row, col) {     if(row == col)       return 'flyToUp';     else       return 'flyToDown';   } });

Sequence

$('#want-to-animate').animate('tile', {   rows: 2,   cols: 2,   sequence: [     [       [0, 0]  // tile     ], // group, all tiles have same animation in the same group     [[1, 1]],      [[0, 1]],      [[1, 0]]   ] });

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/jquery-animations-tile
Author: [email protected]