diagonalFade

is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away.

diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser's with jQuery 1.3.2 — if you'd like to share any of your findings please don't hesitate to contribute on GitHub!

Download
Download the minified version (4kb)

Diagonal Fade Examples

Fixed Width



Don't be shy—view source!

Usage

$("#container").diagonalFade({
time: 100,
 fadeDirection_x: 'left-right', // "left-right" || "right-left"
 fadeDirection_y: 'top-bottom', // "top-bottom" || "bottom-top"
 fade: 'out',                   // "in" || "out"
 complete: null                 // callback function
 } });

// or $("#container").diagonalFade(); — these are all optional params.

Example with <img>'s:
Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes Shoes
Example with <div>'s:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
0
1
2
3
4
5
6
7
8
9
By jonobr1 — only for jQuery. Images from Need Supply Co.

来源：jonobr1　代码整理：脚本之家　感谢：妞妞

转载请注明出处，此代码仅供学习交流，请勿用于商业用途。