Nice little directory browser :D
jquery.marquee.js: cut down for really no reason
+163
-360
+163
-360
public/jquery.marquee.js
+163
-360
public/jquery.marquee.js
···
1
1
/**
2
2
* jQuery.marquee - scrolling text like old marquee element
3
-
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
3
+
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / https://github.com/aamirafridi/jQuery.Marquee
4
4
*/
5
-
;(function(factory) {
6
-
'use strict';
7
-
if (typeof define === 'function' && define.amd) {
8
-
define(['jquery'], factory);
9
-
} else if (typeof exports !== 'undefined') {
10
-
module.exports = factory(require('jquery'));
11
-
} else {
12
-
factory(jQuery);
13
-
}
14
-
})(function($) {
5
+
'use strict';
6
+
(function($) {
15
7
$.fn.marquee = function(options) {
16
8
return this.each(function() {
17
9
// Extend the options if any provided
18
-
var o = $.extend({}, $.fn.marquee.defaults, options),
19
-
$this = $(this),
20
-
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
21
-
loopCount = 3,
22
-
playState = 'animation-play-state',
23
-
css3AnimationIsSupported = false,
10
+
let o = $.extend({}, $.fn.marquee.defaults, options);
11
+
let $this = $(this);
12
+
let $marqueeWrapper, containerWidth, animationCss, elWidth;
13
+
let loopCount = 3;
14
+
let playState = 'animation-play-state';
24
15
25
-
// Private methods
26
-
_prefixedEvent = function(element, type, callback) {
27
-
var pfx = ["webkit", "moz", "MS", "o", ""];
28
-
for (var p = 0; p < pfx.length; p++) {
29
-
if (!pfx[p]) type = type.toLowerCase();
30
-
element.addEventListener(pfx[p] + type, callback, false);
31
-
}
32
-
},
33
-
34
-
_objToString = function(obj) {
35
-
var tabjson = [];
36
-
for (var p in obj) {
37
-
if (obj.hasOwnProperty(p)) {
38
-
tabjson.push(p + ':' + obj[p]);
39
-
}
40
-
}
41
-
tabjson.push();
42
-
return '{' + tabjson.join(',') + '}';
43
-
},
44
-
45
-
_startAnimationWithDelay = function() {
46
-
$this.timer = setTimeout(animate, o.delayBeforeStart);
47
-
},
48
-
49
-
// Public methods
50
-
methods = {
51
-
pause: function() {
52
-
$marqueeWrapper.css(playState, 'paused');
53
-
// save the status
54
-
$this.data('runningStatus', 'paused');
55
-
// fire event
56
-
$this.trigger('paused');
57
-
},
58
-
59
-
resume: function() {
60
-
// resume using css3
61
-
$marqueeWrapper.css(playState, 'running');
62
-
// save the status
63
-
$this.data('runningStatus', 'resumed');
64
-
// fire event
65
-
$this.trigger('resumed');
66
-
},
67
-
68
-
toggle: function() {
69
-
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
70
-
},
71
-
72
-
destroy: function() {
73
-
// Clear timer
74
-
clearTimeout($this.timer);
75
-
// Unbind all events
76
-
$this.find("*").addBack().off();
77
-
// Just unwrap the elements that has been added using this plugin
78
-
$this.html($this.find('.js-marquee:first').html());
79
-
}
80
-
};
16
+
// Private methods
17
+
let _prefixedEvent = function(element, type, callback) {
18
+
let prefixes = ["webkit", "moz", "o", ""];
19
+
for (let p = 0; p < prefixes.length; p++) {
20
+
if (!prefixes[p]) type = type.toLowerCase();
21
+
element.addEventListener(prefixes[p] + type, callback, false);
22
+
}
23
+
};
24
+
25
+
let _objToString = function(obj) {
26
+
let tabjson = [];
27
+
for (let p in obj) {
28
+
if (obj.hasOwnProperty(p))
29
+
tabjson.push(`${ p }:${ obj[p] }`);
30
+
}
31
+
32
+
return `{${ tabjson.join(',') }}`;
33
+
};
34
+
35
+
// Public methods
36
+
let methods = {
37
+
pause: function() {
38
+
$marqueeWrapper.css(playState, 'paused');
39
+
// save the status
40
+
$this.data('runningStatus', 'paused');
41
+
$this.trigger('paused');
42
+
},
43
+
44
+
resume: function() {
45
+
// resume using css3
46
+
$marqueeWrapper.css(playState, 'running');
47
+
// save the status
48
+
$this.data('runningStatus', 'resumed');
49
+
$this.trigger('resumed');
50
+
},
51
+
52
+
toggle: function() {
53
+
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
54
+
},
55
+
56
+
destroy: function() {
57
+
clearTimeout($this.timer);
58
+
$this.find("*").addBack().off();
59
+
// Just unwrap the elements that has been added using this plugin
60
+
$this.html($this.find('.js-marquee:first').html());
61
+
}
62
+
};
81
63
82
64
// Check for methods
83
65
if (typeof options === 'string') {
···
85
67
// Following two IF statements to support public methods
86
68
if (!$marqueeWrapper) {
87
69
$marqueeWrapper = $this.find('.js-marquee-wrapper');
88
-
}
89
-
if ($this.data('css3AnimationIsSupported') === true) {
90
-
css3AnimationIsSupported = true;
91
70
}
92
71
methods[options]();
93
72
}
94
73
return;
95
74
}
96
-
97
-
/* Check if element has data attributes. They have top priority
98
-
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/
99
-
jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */
100
-
var dataAttributes = {},
101
-
attr;
75
+
76
+
// prioritize data-x values over passed options
102
77
$.each(o, function(key) {
103
-
// Check if element has this data attribute
104
-
attr = $this.attr('data-' + key);
78
+
// https://twitter.com/aamirafridi/status/403848044069679104
79
+
let attr = $this.attr('data-' + key);
105
80
if (typeof attr !== 'undefined') {
106
-
// Now check if value is boolean or not
81
+
// set real bool if needed
107
82
switch (attr) {
108
83
case 'true':
109
-
attr = true;
84
+
o[key] = true;
110
85
break;
111
86
case 'false':
112
-
attr = false;
87
+
o[key] = false;
113
88
break;
89
+
default:
90
+
o[key] = attr;
91
+
break
114
92
}
115
-
o[key] = attr;
116
93
}
117
94
});
118
-
119
-
// Reintroduce speed as an option. It calculates duration as a factor of the container width
120
-
// measured in pixels per second.
121
-
if (o.speed) {
95
+
96
+
// calculate duration from if just that was passed
97
+
if (o.speed)
122
98
o.duration = parseInt($this.width(), 10) / o.speed * 1000;
123
-
}
124
-
125
-
// Shortcut to see if direction is upward or downward
126
-
verticalDir = o.direction === 'up' || o.direction === 'down';
127
-
99
+
128
100
// no gap if not duplicated
129
101
o.gap = o.duplicated ? parseInt(o.gap) : 0;
130
102
···
132
104
$this.wrapInner('<div class="js-marquee"></div>');
133
105
134
106
// Make copy of the element
135
-
var $el = $this.find('.js-marquee').css({
107
+
let $el = $this.find('.js-marquee').css({
136
108
'margin-right': o.gap,
137
109
'float': 'left'
138
110
});
···
149
121
150
122
// wrap both inner elements into one div
151
123
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
152
-
153
-
// Save the reference of the wrapper
124
+
154
125
$marqueeWrapper = $this.find('.js-marquee-wrapper');
126
+
elWidth = $this.find('.js-marquee:first').width() + o.gap;
127
+
containerWidth = $this.width();
155
128
156
-
// If direction is up or down, get the height of main element
157
-
if (verticalDir) {
158
-
var containerHeight = $this.height();
159
-
$marqueeWrapper.removeAttr('style');
160
-
$this.height(containerHeight);
161
-
162
-
// Change the CSS for js-marquee element
163
-
$this.find('.js-marquee').css({
164
-
'float': 'none',
165
-
'margin-bottom': o.gap,
166
-
'margin-right': 0
167
-
});
168
-
169
-
// Remove bottom margin from 2nd element if duplicated
170
-
if (o.duplicated) {
171
-
$this.find('.js-marquee:last').css({
172
-
'margin-bottom': 0
173
-
});
174
-
}
175
-
176
-
var elHeight = $this.find('.js-marquee:first').height() + o.gap;
177
-
178
-
// adjust the animation duration according to the text length
179
-
if (o.startVisible && !o.duplicated) {
180
-
// Compute the complete animation duration and save it for later reference
181
-
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
182
-
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
183
-
184
-
// formula is to: (Height of the text node / height of the main container) * duration
185
-
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration;
186
-
} else {
187
-
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
188
-
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
189
-
}
190
-
129
+
// adjust the animation duration according to the text length
130
+
if (o.startVisible && !o.duplicated) {
131
+
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
132
+
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration;
191
133
} else {
192
-
// Save the width of the each element so we can use it in animation
193
-
elWidth = $this.find('.js-marquee:first').width() + o.gap;
194
-
195
-
// container width
196
-
containerWidth = $this.width();
197
-
198
-
// adjust the animation duration according to the text length
199
-
if (o.startVisible && !o.duplicated) {
200
-
// Compute the complete animation duration and save it for later reference
201
-
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
202
-
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
203
-
204
-
// (Width of the text node / width of the main container) * duration
205
-
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration;
206
-
} else {
207
-
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
208
-
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
209
-
}
134
+
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
210
135
}
211
136
212
137
// if duplicated then reduce the duration
213
-
if (o.duplicated) {
138
+
if (o.duplicated)
214
139
o.duration = o.duration / 2;
215
-
}
216
-
217
-
if (o.allowCss3Support) {
218
-
var elm = document.body || document.createElement('div'),
219
-
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000),
220
-
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
221
-
animationString = 'animation',
222
-
animationCss3Str = '',
223
-
keyframeString = '';
140
+
141
+
let animationName = `marqueeAnimation-${Math.floor(Math.random() * 10000000)}`;
142
+
let animationString = 'animation';
143
+
let animationCss3Str = '';
144
+
let keyframeString = '';
145
+
146
+
keyframeString += `@keyframes ${animationName} `;
147
+
148
+
animationCss3Str += `${animationName} ${o.duration/1000}s ${o.delayBeforeStart/1000}s infinite linear`;
149
+
$this.data('css3AnimationIsSupported', true);
224
150
225
-
// Check css3 support
226
-
if (elm.style.animation !== undefined) {
227
-
keyframeString = '@keyframes ' + animationName + ' ';
228
-
css3AnimationIsSupported = true;
229
-
}
230
-
231
-
if (css3AnimationIsSupported === false) {
232
-
for (var i = 0; i < domPrefixes.length; i++) {
233
-
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
234
-
var prefix = '-' + domPrefixes[i].toLowerCase() + '-';
235
-
animationString = prefix + animationString;
236
-
playState = prefix + playState;
237
-
keyframeString = '@' + prefix + 'keyframes ' + animationName + ' ';
238
-
css3AnimationIsSupported = true;
239
-
break;
240
-
}
241
-
}
242
-
}
243
-
244
-
if (css3AnimationIsSupported) {
245
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite linear';
246
-
$this.data('css3AnimationIsSupported', true);
247
-
}
248
-
}
249
-
250
-
var _rePositionVertically = function() {
251
-
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')');
252
-
},
253
-
_rePositionHorizontally = function() {
254
-
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')');
255
-
};
151
+
let _rePositionHorizontally = function() {
152
+
$marqueeWrapper.css('transform', `translateX(${o.direction === 'left' ? `${containerWidth}px` : `-${elWidth}px`})`);
153
+
};
256
154
257
155
// if duplicated option is set to true than position the wrapper
258
156
if (o.duplicated) {
259
-
if (verticalDir) {
260
-
if (o.startVisible) {
261
-
$marqueeWrapper.css('transform', 'translateY(0)');
262
-
} else {
263
-
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + ((elHeight * 2) - o.gap) + 'px') + ')');
264
-
}
265
-
} else {
266
-
if (o.startVisible) {
267
-
$marqueeWrapper.css('transform', 'translateX(0)');
268
-
} else {
269
-
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + ((elWidth * 2) - o.gap) + 'px') + ')');
270
-
}
271
-
}
272
-
157
+
o.startVisible
158
+
? $marqueeWrapper.css('transform', 'translateX(0)')
159
+
: $marqueeWrapper.css('transform', `translateX(${o.direction === 'left' ? `${containerWidth}px` : `-${(elWidth*2) - o.gap}px`})`);
160
+
273
161
// If the text starts out visible we can skip the two initial loops
274
-
if (!o.startVisible) {
162
+
if (!o.startVisible)
275
163
loopCount = 1;
276
-
}
277
164
} else if (o.startVisible) {
278
165
// We only have two different loops if marquee is duplicated and starts visible
279
166
loopCount = 2;
280
167
} else {
281
-
if (verticalDir) {
282
-
_rePositionVertically();
283
-
} else {
284
-
_rePositionHorizontally();
285
-
}
168
+
_rePositionHorizontally();
286
169
}
287
170
288
171
// Animate recursive method
289
-
var animate = function() {
172
+
let animate = function() {
290
173
if (o.duplicated) {
291
174
// When duplicated, the first loop will be scroll longer so double the duration
292
175
if (loopCount === 1) {
293
176
o._originalDuration = o.duration;
294
-
if (verticalDir) {
295
-
o.duration = o.direction === 'up' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2;
296
-
} else {
297
-
o.duration = o.direction === 'left' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2;
298
-
}
177
+
o.duration = o.direction === 'left'
178
+
? o.duration + (containerWidth / ((elWidth) / o.duration))
179
+
: o.duration * 2;
299
180
// Adjust the css3 animation as well
300
-
if (animationCss3Str) {
301
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's linear';
302
-
}
181
+
if (animationCss3Str)
182
+
animationCss3Str = `${animationName} ${o.duration/1000}s ${o.delayBeforeStart/1000}s linear`;
183
+
303
184
loopCount++;
304
185
}
305
186
// On 2nd loop things back to normal, normal duration for the rest of animations
···
309
190
if (animationCss3Str) {
310
191
animationName = animationName + '0';
311
192
keyframeString = $.trim(keyframeString) + '0 ';
312
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite linear';
193
+
animationCss3Str = `${animationName} ${o.duration/1000}s 0s infinite linear`;
313
194
}
314
195
loopCount++;
315
196
}
316
197
}
198
+
199
+
if (o.duplicated) {
200
+
// Adjust the starting point of animation only when first loops finishes
201
+
if (loopCount > 2)
202
+
$marqueeWrapper.css('transform', `translateX(${o.direction === 'left' ? 0 : `-${elWidth}px`})`);
317
203
318
-
if (verticalDir) {
319
-
if (o.duplicated) {
320
-
321
-
// Adjust the starting point of animation only when first loops finishes
322
-
if (loopCount > 2) {
323
-
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? 0 : '-' + elHeight + 'px') + ')');
324
-
}
325
-
204
+
animationCss = {
205
+
'transform': o.direction === 'left' ? `translateX(-${elWidth}px)` : `translateX(0)`
206
+
};
207
+
} else if (o.startVisible) {
208
+
// This loop moves the marquee out of the container
209
+
if (loopCount === 2) {
210
+
// Adjust the css3 animation as well
211
+
if (animationCss3Str)
212
+
animationCss3Str = `${animationName} ${o.duration/1000}s ${o.delayBeforeStart/1000}s linear`;
213
+
326
214
animationCss = {
327
-
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : 0) + ')'
215
+
'transform': o.direction === 'left' ? `translateX(-${elWidth}px)` : `translateX(${containerWidth}px)`
328
216
};
329
-
} else if (o.startVisible) {
330
-
// This loop moves the marquee out of the container
331
-
if (loopCount === 2) {
332
-
// Adjust the css3 animation as well
333
-
if (animationCss3Str) {
334
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's linear';
335
-
}
336
-
animationCss = {
337
-
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : containerHeight + 'px') + ')'
338
-
};
339
-
loopCount++;
340
-
} else if (loopCount === 3) {
341
-
// Set the duration for the animation that will run forever
342
-
o.duration = o._completeDuration;
343
-
// Adjust the css3 animation as well
344
-
if (animationCss3Str) {
345
-
animationName = animationName + '0';
346
-
keyframeString = $.trim(keyframeString) + '0 ';
347
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite linear';
348
-
}
349
-
_rePositionVertically();
217
+
loopCount++;
218
+
} else if (loopCount === 3) {
219
+
// Set the duration for the animation that will run forever
220
+
o.duration = o._completeDuration;
221
+
// Adjust the css3 animation as well
222
+
if (animationCss3Str) {
223
+
animationName = animationName + '0';
224
+
keyframeString = $.trim(keyframeString) + '0 ';
225
+
animationCss3Str = `${animationName} ${o.duration / 1000}s 0s infinite linear`;
350
226
}
351
-
} else {
352
-
_rePositionVertically();
353
-
animationCss = {
354
-
'transform': 'translateY(' + (o.direction === 'up' ? '-' + ($marqueeWrapper.height()) + 'px' : containerHeight + 'px') + ')'
355
-
};
227
+
_rePositionHorizontally();
356
228
}
357
229
} else {
358
-
if (o.duplicated) {
359
-
360
-
// Adjust the starting point of animation only when first loops finishes
361
-
if (loopCount > 2) {
362
-
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? 0 : '-' + elWidth + 'px') + ')');
363
-
}
364
-
365
-
animationCss = {
366
-
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : 0) + ')'
367
-
};
368
-
369
-
} else if (o.startVisible) {
370
-
// This loop moves the marquee out of the container
371
-
if (loopCount === 2) {
372
-
// Adjust the css3 animation as well
373
-
if (animationCss3Str) {
374
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's linear';
375
-
}
376
-
animationCss = {
377
-
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
378
-
};
379
-
loopCount++;
380
-
} else if (loopCount === 3) {
381
-
// Set the duration for the animation that will run forever
382
-
o.duration = o._completeDuration;
383
-
// Adjust the css3 animation as well
384
-
if (animationCss3Str) {
385
-
animationName = animationName + '0';
386
-
keyframeString = $.trim(keyframeString) + '0 ';
387
-
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite linear';
388
-
}
389
-
_rePositionHorizontally();
390
-
}
391
-
} else {
392
-
_rePositionHorizontally();
393
-
animationCss = {
394
-
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
395
-
};
396
-
}
230
+
_rePositionHorizontally();
231
+
animationCss = {
232
+
'transform': o.direction === 'left' ? `translateX(-${elWidth}px)` : `translateX(${containerWidth}px)`
233
+
};
397
234
}
398
-
399
-
// fire event
235
+
400
236
$this.trigger('beforeStarting');
401
-
402
-
// If css3 support is available than do it with css3, otherwise use jQuery as fallback
403
-
if (css3AnimationIsSupported) {
404
-
// Add css3 animation to the element
405
-
$marqueeWrapper.css(animationString, animationCss3Str);
406
-
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}',
407
-
$styles = $marqueeWrapper.find('style');
408
-
409
-
// Now add the keyframe animation to the marquee element
410
-
if ($styles.length !== 0) {
411
-
// Bug fixed for jQuery 1.3.x - Instead of using .last(), use following
412
-
$styles.filter(":last").html(keyframeCss);
413
-
} else {
414
-
$('head').append('<style>' + keyframeCss + '</style>');
415
-
}
237
+
238
+
// Add css3 animation to the element
239
+
$marqueeWrapper.css(animationString, animationCss3Str);
240
+
let keyframeCss = `${keyframeString} { 100% ${_objToString(animationCss)} }`
241
+
let $styles = $marqueeWrapper.find('style');
416
242
417
-
// Animation iteration event
418
-
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
419
-
$this.trigger('finished');
420
-
});
421
-
// Animation stopped
422
-
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
423
-
animate();
424
-
$this.trigger('finished');
425
-
});
243
+
// Now add the keyframe animation to the marquee element
244
+
$styles.length !== 0
245
+
? $styles.last().html(keyframeCss)
246
+
: $('head').append(`<style>${keyframeCss}</style>`);
426
247
427
-
} else {
428
-
// Start animating
429
-
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() {
430
-
// fire event
431
-
$this.trigger('finished');
432
-
// animate again
433
-
if (o.pauseOnCycle) {
434
-
_startAnimationWithDelay();
435
-
} else {
436
-
animate();
437
-
}
438
-
});
439
-
}
248
+
// Animation iteration event
249
+
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
250
+
$this.trigger('finished');
251
+
});
252
+
// Animation stopped
253
+
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
254
+
animate();
255
+
$this.trigger('finished');
256
+
});
257
+
440
258
// save the status
441
259
$this.data('runningStatus', 'resumed');
442
260
};
443
-
444
-
// bind pause and resume events
261
+
445
262
$this.on('pause', methods.pause);
446
263
$this.on('resume', methods.resume);
447
-
448
-
// If css3 animation is supported than call animate method at once
449
-
if (css3AnimationIsSupported && o.allowCss3Support) {
450
-
animate();
451
-
} else {
452
-
// Starts the recursive method
453
-
_startAnimationWithDelay();
454
-
}
455
-
264
+
265
+
animate();
456
266
});
457
-
}; // End of Plugin
267
+
};
268
+
458
269
// Public: plugin defaults options
459
270
$.fn.marquee.defaults = {
460
-
// If you wish to always animate using jQuery
461
-
allowCss3Support: true,
462
-
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
463
-
css3easing: 'linear',
464
-
// requires jQuery easing plugin. Default is 'linear'
465
-
// easing: 'linear',
466
271
// pause time before the next animation turn in milliseconds
467
272
delayBeforeStart: 1000,
468
-
// 'left', 'right', 'up' or 'down'
273
+
// 'left' or 'right'
469
274
direction: 'left',
470
275
// true or false - should the marquee be duplicated to show an effect of continues flow
471
276
duplicated: false,
···
479
284
gap: 20,
480
285
// on cycle pause the marquee
481
286
pauseOnCycle: false,
482
-
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
483
-
// pauseOnHover: false,
484
287
// the marquee is visible initially positioned next to the border towards it will be moving
485
288
startVisible: false
486
289
};
487
-
});
290
+
})(jQuery);