-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery.ticker.js
103 lines (84 loc) · 2.16 KB
/
jquery.ticker.js
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
/*!
* jQuery ticker - v0.1 - 7/9/2011
*
* Version: 0.1, Last updated: 7/9/2011
* Requires: jQuery v1.3.2+
*
* Copyright (c) 2011 Radek Pleskac www.radekpleskac.com
* Dual licensed under the MIT and GPL licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Examples http://www.radekpleskac.com.com/projects/jquery-ticker/
* jQuery plugin to turn an unordered list <ul> into a simple ticker, displaying one list item at a time.
*
*/
(function($){
$.fn.ticker = function(options) {
$.fn.ticker.defaults = {
controls: false, //show controls, to be implemented
interval: 3000, //interval to show next item
effect: "fadeIn", // available effects: fadeIn, slideUp, slideDown
duration: 400 //duration of the change to the next item
};
var o = $.extend({}, $.fn.ticker.defaults, options);
if (!this.length)
return;
return this.each(function() {
var $ul = $(this),
$items = $ul.find("li"),
index = 0,
paused = false,
time;
function start() {
time = setInterval(function() {
if (!paused)
changeItem();
}, o.interval);
}
function changeItem() {
var $current = $items.eq(index);
index++;
if (index == $items.length)
index = 0;
var $next = $items.eq(index);
if (o.effect == "fadeIn") {
$current.fadeOut(function() {
$next.fadeIn();
});
}
else if (o.effect == "slideUp" || o.effect == "slideDown") {
var h = $ul.height();
var d = (o.effect == "slideUp") ? 1 : -1;
$current.animate({
top: -h * d + "px"
}, o.duration, function() { $(this).hide(); });
$next.css({
"display": "block",
"top": h * d + "px"
});
$next.animate({
top: 0
}, o.duration);
}
}
function bindEvents() {
$ul.hover(function() {
paused = true;
},function() {
paused = false;
});
}
function init() {
$items.not(":first").hide();
if (o.effect == "slideUp" || o.effect == "slideDown") {
$ul.css("position", "relative");
$items.css("position", "absolute");
}
bindEvents();
start();
}
init();
});
};
})(jQuery);