-
Notifications
You must be signed in to change notification settings - Fork 3
/
k-description.js
91 lines (79 loc) · 2.3 KB
/
k-description.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
/*
* Name: k-description - Plugin jQuery.
* home: https://github.com/filipelinhares/k-description
* version: 1.0.1
* author: Filipe Linhares
*/
(function($) {
$.fn.description = function(options) {
//Define defaults values
var defaults = {
kheight: '100px'
, kwidth: '100%'
, kmarginTop: "100px"
, kduration: 1000
, kin: 'down'
, kout: 'down'
, kopacity: 1
, kease: ''
, kcontent: "k-description jQuery"
},
//Extend defaults and user options
settings = $.extend(
{}
, defaults
, options
);
//Return
return this.each(function() {
//Create class kp to paragraph, kcontent to span and style.
$(this)
.css('overflow', 'hidden')
.append('<p class="kp"><span class="kcontent"></span></p>');
$("p.kp span.kcontent")
.css('display', 'block')
.text(settings.kcontent);
//Manipule down and up value to kin
if (settings.kin == 'down')
settings.kin = '+';
else if (settings.kin == 'up')
settings.kin = '-';
//Style kp with user options
$("p.kp").css({
display: "block"
, width: settings.kwidth
, height: settings.kheight
, opacity: settings.kopacity
, marginTop: settings.kin + settings.kheight
});
//Add event mouseover to element, and show description.
$(this).on({
mouseover: function() {
$(this)
.find("p.kp")
.stop()
.animate({
width: settings.kwidth
, height: settings.kheight
, marginTop: settings.kmarginTop
}, settings.kduration, settings.kease);
},
//Add evente mouseleave to element, and hide description
mouseleave: function() {
//Manipulate down and up value to kout.
if (settings.kout == 'down')
settings.kout = '+';
else if (settings.kout == 'up')
settings.kout = '-';
//Clear animation from description.
$(this)
.find("p.kp")
.stop()
.animate({
marginTop: settings.kout + settings.kheight
}, settings.kduration, settings.kease);
}
});
});
};
})(jQuery);