/* ------------------------------------------------------------------------------
*
* # Advanced Velocity.js examples
*
* Specific JS code additions for extension_velocity_examples.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Animation options
// ------------------------------
// Properties animation
$('.velocity-properties').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.panel').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Chained animation
$('.velocity-chained').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.panel').velocity({
marginLeft: 20
}).velocity('reverse', {
delay: 1000
}).velocity({
marginRight: 20
}).velocity('reverse', {
delay: 1000
}).velocity({
opacity: 0.5
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Stagger animation
$('.velocity-stagger').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.panel').velocity('transition.slideUpIn', {
stagger: 500
});
});
// Drag animation
$('.velocity-drag').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.panel').velocity('transition.slideUpBigIn', {
duration: 1000,
drag: true
});
});
// Backwards animation
$('.velocity-backwards').on('click', function (e) {
e.preventDefault();
$(this).parent().next().find('.panel').velocity('transition.slideDownOut', {
stagger: 400,
backwards: true
})
.velocity({ opacity: 1 }, {
duration: 500,
display: "block"
});
});
// Animation callbacks
// ------------------------------
// Begin callback
$('.velocity-begin').on('click', function (e) {
e.preventDefault();
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
begin: function() {
alert('Begin callback example');
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Complete callback
$('.velocity-complete').on('click', function (e) {
e.preventDefault();
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
complete: function() {
alert('Complete callback example');
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Progress callback animation
$('.velocity-progress').on('click', function (e) {
e.preventDefault();
var $percentComplete = $("#percentComplete"),
$timeRemaining = $("#timeRemaining");
$(this).parent().next('.row').velocity({
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
duration: 1000,
progress: function(elements, percentComplete, timeRemaining, timeStart) {
$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");
$timeRemaining.html(timeRemaining + "ms remaining.");
}
}).velocity('reverse', {
delay: 1000,
complete: function() {
$(this).removeAttr('style');
}
})
});
// Animate layout on page load
// ------------------------------
// Hide elements first
$(".sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
.css('opacity', 0);
// Animate when Pace loading is done
Pace.on('done', function () {
// Layout parts
$(".navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
.css('opacity', 1)
.velocity("transition.slideDownIn", {
stagger: 200,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style');
}
});
// Sidebar
$(".sidebar")
.css({opacity: 0, borderColor: 'transparent'})
.velocity("transition.slideUpIn", {
delay: 100,
duration: 500,
display: 'table-cell',
complete: function(elements) {
$(this).removeAttr('style');
}
});
// Navigation list on load
$(".navigation > li")
.css('opacity', 0)
.velocity("transition.slideLeftIn", {
delay: 500,
stagger: 75,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
// Navigation list on click
$(".navigation .has-ul").on('click', function() {
if ($(this).parent('li').hasClass('active')) {
$(this).next('ul').children('li').css('opacity', 0).velocity("transition.fadeIn", {
delay: 150,
stagger: 30,
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
} else {
$(this).next('ul').children('li').css('opacity', 0).velocity("transition.slideLeftOut", {
duration: 200,
complete: function(elements) {
$(this).removeAttr('style')
}
});
}
});
});
});