Skip to content

Commit 3ed9280

Browse files
committed
Add support for Velocity.js animations and stop animation queue before animating.
1 parent 163e93a commit 3ed9280

File tree

8 files changed

+126
-67
lines changed

8 files changed

+126
-67
lines changed

README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# SlickNav v1.0.7
1+
# SlickNav v1.0.8
22
## Responsive Mobile Menu jQuery Plugin
33

44
[![Join the chat at https://gitter.im/ComputerWolf/SlickNav](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ComputerWolf/SlickNav?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -56,6 +56,7 @@ slicknav.css can be modified to fit website design
5656
'removeIds': true // Remove IDs from all menu elements. Defaults to false if duplicate set to false.
5757
'removeClasses': false // Remove classes from all menu elements.
5858
'brand': '' // Add branding to menu bar.
59+
'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity".
5960

6061
### Callbacks
6162
'init': function(){}, // Called after SlickNav creation
@@ -68,7 +69,11 @@ slicknav.css can be modified to fit website design
6869
$('.menu').slicknav('toggle'); // Method to toggle the menu
6970
$('.menu').slicknav('open'); // Method to open the menu
7071
$('.menu').slicknav('close'); // Method to close the menu
72+
73+
### Animations
74+
SlickNav will use jQuery for animations by default. If you wish to use Velocity.js for animating, be sure to include the library in your code before including SlickNav.
7175

76+
### Menu Display
7277
Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.
7378

7479
For example:
@@ -97,4 +102,4 @@ More examples at [SlickNav.com](http://slicknav.com)
97102
* Opera
98103
* IE7+
99104
* Android Browser
100-
* iOS Safari
105+
* iOS Safari

bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "slicknav",
3-
"version": "1.0.7",
3+
"version": "1.0.8",
44
"authors": [
55
"Josh Cope"
66
],

dist/jquery.slicknav.js

Lines changed: 57 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* SlickNav Responsive Mobile Menu v1.0.7
2+
* SlickNav Responsive Mobile Menu v1.0.8
33
* (c) 2016 Josh Cope
44
* licensed under MIT
55
*/
@@ -25,6 +25,7 @@
2525
removeClasses: false,
2626
removeStyles: false,
2727
brand: '',
28+
animations: 'jquery',
2829
init: function () {},
2930
beforeOpen: function () {},
3031
beforeClose: function () {},
@@ -333,23 +334,52 @@
333334
if (animate) {
334335
duration = settings.duration;
335336
}
337+
338+
function afterOpen(trigger, parent) {
339+
$(trigger).removeClass(prefix+'_animating');
340+
$(parent).removeClass(prefix+'_animating');
341+
342+
//Fire afterOpen callback
343+
if (!init) {
344+
settings.afterOpen(trigger);
345+
}
346+
}
347+
348+
function afterClose(trigger, parent) {
349+
el.attr('aria-hidden','true');
350+
items.attr('tabindex', '-1');
351+
$this._setVisAttr(el, true);
352+
el.hide(); //jQuery 1.7 bug fix
353+
354+
$(trigger).removeClass(prefix+'_animating');
355+
$(parent).removeClass(prefix+'_animating');
356+
357+
//Fire init or afterClose callback
358+
if (!init){
359+
settings.afterClose(trigger);
360+
} else if (trigger == 'init'){
361+
settings.init();
362+
}
363+
}
336364

337365
if (el.hasClass(prefix+'_hidden')) {
338366
el.removeClass(prefix+'_hidden');
339367
//Fire beforeOpen callback
340-
if (!init) {
341-
settings.beforeOpen(trigger);
342-
}
343-
el.slideDown(duration, settings.easingOpen, function(){
344-
345-
$(trigger).removeClass(prefix+'_animating');
346-
$(parent).removeClass(prefix+'_animating');
347-
348-
//Fire afterOpen callback
349-
if (!init) {
350-
settings.afterOpen(trigger);
351-
}
352-
});
368+
if (!init) {
369+
settings.beforeOpen(trigger);
370+
}
371+
if (settings.animations === 'jquery') {
372+
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
373+
afterOpen(trigger, parent);
374+
});
375+
} else if(settings.animations === 'velocity') {
376+
el.velocity("finish").velocity("slideDown", {
377+
easing: settings.easingOpen,
378+
complete: function() {
379+
afterOpen(trigger, parent);
380+
}
381+
});
382+
}
353383
el.attr('aria-hidden','false');
354384
items.attr('tabindex', '0');
355385
$this._setVisAttr(el, false);
@@ -361,22 +391,19 @@
361391
settings.beforeClose(trigger);
362392
}
363393

364-
el.slideUp(duration, this.settings.easingClose, function() {
365-
el.attr('aria-hidden','true');
366-
items.attr('tabindex', '-1');
367-
$this._setVisAttr(el, true);
368-
el.hide(); //jQuery 1.7 bug fix
369-
370-
$(trigger).removeClass(prefix+'_animating');
371-
$(parent).removeClass(prefix+'_animating');
372-
373-
//Fire init or afterClose callback
374-
if (!init){
375-
settings.afterClose(trigger);
376-
} else if (trigger == 'init'){
377-
settings.init();
378-
}
379-
});
394+
if (settings.animations === 'jquery') {
395+
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
396+
afterClose(trigger, parent)
397+
});
398+
} else if (settings.animations === 'velocity') {
399+
400+
el.velocity("finish").velocity("slideUp", {
401+
easing: settings.easingClose,
402+
complete: function() {
403+
afterClose(trigger, parent);
404+
}
405+
});
406+
}
380407
}
381408
};
382409

dist/jquery.slicknav.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/slicknav.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* SlickNav Responsive Mobile Menu v1.0.7
2+
* SlickNav Responsive Mobile Menu v1.0.8
33
* (c) 2016 Josh Cope
44
* licensed under MIT
55
*/

0 commit comments

Comments
 (0)