cxm_jquery_animate.js
3.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
Animation of HTML elements style.
Requirement:
jquery
jquery-ui (if you want to use advanced animating functions, ie: easing)
Usage:
CalexiumToolBox.CXM_Animate.animate(selector, trigger_type, css_props, options, second_options);
Arguments:
- selector
JQuery selector (string), animation and event will be applied to HTML elements matched by the selector.
* Example:
"#element_id"
or
".class_name"
- anims
Array of animations object
Example:
[
{
id: "my_animation",
event: "mouseover"
stop_anims_id: [],
props: { width: 64, height: 64 },
options: { easing: "linear", duration: 2000 }
}
}
Note:
Options properties are the same as the jquery "animate" method options.
*/
$(document).ready(function () {
if (window.CalexiumToolBox === undefined) {
CalexiumToolBox = {};
}
if (CalexiumToolBox.CXM_Animate === undefined) {
CalexiumToolBox.CXM_Animate = {
animate: null // see below
};
}
CalexiumToolBox.CXM_Animate.animate = function (selector, anims) {
$(selector).each(function() {
var elem = $(this),
grouped_anims = {
},
initial_css_props = {};;
// group/register anims by events
$(anims).each(function (index, anim) {
var anim_group = grouped_anims[anim.event];
if (anim_group === undefined) {
anim_group = grouped_anims[anim.event] = [];
}
anim_group.push(anim);
});
// iterate over all props of each anims and store the initial state of each css props of the element
// this is done only once for the group of anims and it happen only if one anim props is empty which mean it animate back to element initial state at initialization
for (i = 0; i < anims.length; i += 1) {
if (jQuery.isEmptyObject(anims[i].props) && jQuery.isEmptyObject(initial_css_props)) {
for (j = 0; j < anims.length; j += 1) {
$.each(anims[j].props, function (key, value) {
initial_css_props[key] = elem.css(key).replace('px', '');
});
}
anims[i].props = initial_css_props;
break;
}
}
// now for each event groups, bind the event
$.each(grouped_anims, function (key, anims) {
elem.bind(key,
function() {
var anim_object, options,
id, i, j;
// setup each animations
for (i = 0; i < anims.length; i += 1) {
anim_object = anims[i];
options = anim_object.options,
stop_anims_id = anim_object.stop_anims_id;
// stop if needed specific anims determined by a list of ids
if (stop_anims_id !== undefined) {
for (id = 0; id < stop_anims_id.length; id += 1) {
elem.stop(stop_anims_id[id], true);
}
}
options.queue = anim_object.id;
elem.animate(anim_object.props, options).dequeue(anim_object.id);
}
}
);
});
});
};
});