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.
下载代码说明
X关闭

diagonalFade 基于jquery的图片淡入淡出切换效果插件

diagonalFade 图片淡入淡出切换效果插件，用来生成各式各样的淡入淡出效果，自带的示例就是一个很好的教程，来自国外的插件，希望大家喜欢，diagonalFade渐变插件分享给jQuery爱好者。