forked from bitovi/jquerypp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhover.html
More file actions
128 lines (111 loc) · 32.1 KB
/
hover.html
File metadata and controls
128 lines (111 loc) · 32.1 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
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html> <html> <head> <title>hover.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="jquerypp.html"> jquerypp.js </a> <a class="source" href="animate.html"> animate.js </a> <a class="source" href="compare.html"> compare.js </a> <a class="source" href="cookie.html"> cookie.js </a> <a class="source" href="dimensions.html"> dimensions.js </a> <a class="source" href="form_params.html"> form_params.js </a> <a class="source" href="range.html"> range.js </a> <a class="source" href="selection.html"> selection.js </a> <a class="source" href="styles.html"> styles.js </a> <a class="source" href="within.html"> within.js </a> <a class="source" href="default.html"> default.js </a> <a class="source" href="destroyed.html"> destroyed.js </a> <a class="source" href="drag.html"> drag.js </a> <a class="source" href="core.html"> core.js </a> <a class="source" href="limit.html"> limit.js </a> <a class="source" href="scroll.html"> scroll.js </a> <a class="source" href="step.html"> step.js </a> <a class="source" href="drop.html"> drop.js </a> <a class="source" href="fastfix.html"> fastfix.js </a> <a class="source" href="hover.html"> hover.js </a> <a class="source" href="key.html"> key.js </a> <a class="source" href="livehack.html"> livehack.js </a> <a class="source" href="pause.html"> pause.js </a> <a class="source" href="resize.html"> resize.js </a> <a class="source" href="reverse.html"> reverse.js </a> <a class="source" href="swipe.html"> swipe.js </a> <a class="source" href="json.html"> json.js </a> <a class="source" href="vector.html"> vector.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> hover.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_delay</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">.</span><span class="nx">delay</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_distance</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">.</span><span class="nx">distance</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_leave</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">.</span><span class="nx">leave</span>
<span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">delay</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
<span class="nx">distance</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
<span class="nx">leave</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">})</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">delay</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">delay</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_delay</span> <span class="o">=</span> <span class="nx">delay</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">distance</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">distance</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_distance</span> <span class="o">=</span> <span class="nx">distance</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">leave</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">leave</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_leave</span> <span class="o">=</span> <span class="nx">leave</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="kd">var</span> <span class="nx">event</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">event</span><span class="p">,</span>
<span class="nx">handle</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">handle</span><span class="p">,</span>
<span class="nx">onmouseenter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>now start checking mousemoves to update location</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">delegate</span> <span class="o">=</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">delegateTarget</span> <span class="o">||</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">selector</span> <span class="o">=</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">handleObj</span><span class="p">.</span><span class="nx">selector</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">pending</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="s2">"_hover"</span> <span class="o">+</span> <span class="nx">selector</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>prevents another mouseenter until current has run its course</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">pending</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Under some circumstances, mouseleave may never fire
(e.g., the element is removed while hovered)
so if we've entered another element, wait the leave time,
then force it to release.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">pending</span><span class="p">.</span><span class="nx">forcing</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">pending</span><span class="p">.</span><span class="nx">forcing</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">pending</span><span class="p">.</span><span class="nx">leaveTimer</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">leaveTime</span> <span class="o">=</span> <span class="nx">pending</span><span class="p">.</span><span class="nx">leaving</span> <span class="o">?</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">pending</span><span class="p">.</span><span class="nx">hover</span><span class="p">.</span><span class="nx">leave</span> <span class="o">-</span> <span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()</span> <span class="o">-</span> <span class="nx">pending</span><span class="p">.</span><span class="nx">leaving</span><span class="p">))</span> <span class="o">:</span> <span class="nx">pending</span><span class="p">.</span><span class="nx">hover</span><span class="p">.</span><span class="nx">leave</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">pending</span><span class="p">.</span><span class="nx">callHoverLeave</span><span class="p">();</span>
<span class="nx">onmouseenter</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">self</span><span class="p">,</span> <span class="nx">ev</span><span class="p">);</span>
<span class="p">},</span> <span class="nx">leaveTime</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">loc</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">pageX</span><span class="o">:</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span>
<span class="nx">pageY</span><span class="o">:</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">pageY</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>The current distance</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dist</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Timer that checks for the distance travelled</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">timer</span><span class="p">,</span> <span class="nx">enteredEl</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>If we are hovered</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hovered</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>The previous event</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">lastEv</span> <span class="o">=</span> <span class="nx">ev</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>The $.Hover instance passed to events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hover</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Hover</span><span class="p">(),</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>timer if hover.leave has been called</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">leaveTimer</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Callback for triggering hoverleave</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">callHoverLeave</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="p">[</span><span class="s2">"hoverleave"</span><span class="p">],</span> <span class="nx">selector</span><span class="p">),</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">,</span> <span class="nx">ev</span><span class="p">,</span> <span class="nx">hover</span><span class="p">)</span>
<span class="p">})</span>
<span class="nx">cleanUp</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">mousemove</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">leaveTimer</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Update the distance and location</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dist</span> <span class="o">+=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">-</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">pageY</span> <span class="o">-</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">pageY</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
<span class="nx">loc</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">pageX</span><span class="o">:</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span>
<span class="nx">pageY</span><span class="o">:</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">pageY</span>
<span class="p">}</span>
<span class="nx">lastEv</span> <span class="o">=</span> <span class="nx">ev</span>
<span class="p">},</span>
<span class="nx">mouseleave</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hovered</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>go right away</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">hover</span><span class="p">.</span><span class="nx">_leave</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callHoverLeave</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">leaveTimer</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>leave the hover after the time set in hover.leave(time)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">pending</span><span class="p">.</span><span class="nx">leaving</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
<span class="nx">leaveTimer</span> <span class="o">=</span> <span class="nx">pending</span><span class="p">.</span><span class="nx">leaveTimer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">callHoverLeave</span><span class="p">();</span>
<span class="p">},</span> <span class="nx">hover</span><span class="p">.</span><span class="nx">_leave</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">cleanUp</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">cleanUp</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Unbind all events and data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s2">"mouseleave"</span><span class="p">,</span> <span class="nx">mouseleave</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s2">"mousemove"</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">removeData</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="s2">"_hover"</span> <span class="o">+</span> <span class="nx">selector</span><span class="p">)</span>
<span class="p">},</span>
<span class="nx">hoverenter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="p">[</span><span class="s2">"hoverenter"</span><span class="p">],</span> <span class="nx">selector</span><span class="p">),</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">,</span> <span class="nx">lastEv</span><span class="p">,</span> <span class="nx">hover</span><span class="p">)</span>
<span class="p">})</span>
<span class="nx">hovered</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">pending</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">callHoverLeave</span><span class="o">:</span> <span class="nx">callHoverLeave</span><span class="p">,</span>
<span class="nx">hover</span><span class="o">:</span> <span class="nx">hover</span>
<span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="s2">"_hover"</span> <span class="o">+</span> <span class="nx">selector</span><span class="p">,</span> <span class="nx">pending</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Bind the mousemove event</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mousemove"</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mouseleave"</span><span class="p">,</span> <span class="nx">mouseleave</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>call hoverinit for each element with the hover instance</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">delegate</span><span class="p">,</span> <span class="p">[</span><span class="s2">"hoverinit"</span><span class="p">],</span> <span class="nx">selector</span><span class="p">),</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">,</span> <span class="nx">ev</span><span class="p">,</span> <span class="nx">hover</span><span class="p">)</span>
<span class="p">})</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hover</span><span class="p">.</span><span class="nx">_delay</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">hoverenter</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>check that we aren't moving around</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">dist</span> <span class="o"><</span> <span class="nx">hover</span><span class="p">.</span><span class="nx">_distance</span> <span class="o">&&</span> <span class="nx">$</span><span class="p">(</span><span class="nx">enteredEl</span><span class="p">).</span><span class="nx">queue</span><span class="p">().</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">hoverenter</span><span class="p">();</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Reset distance and timer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dist</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">callee</span><span class="p">,</span> <span class="nx">hover</span><span class="p">.</span><span class="nx">_delay</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">},</span> <span class="nx">hover</span><span class="p">.</span><span class="nx">_delay</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Attach events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">event</span><span class="p">.</span><span class="nx">setupHelper</span><span class="p">([</span>
<span class="s2">"hoverinit"</span><span class="p">,</span>
<span class="s2">"hoverenter"</span><span class="p">,</span>
<span class="s2">"hoverleave"</span><span class="p">,</span>
<span class="s2">"hovermove"</span><span class="p">],</span> <span class="s2">"mouseenter"</span><span class="p">,</span> <span class="nx">onmouseenter</span><span class="p">)</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>