(function ($) { $(document).ready(function() { // jQuery reverse $.fn.reverse = [].reverse; // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs! $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) { var $this = $(this); openFABMenu($this); }); $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle)', function(e) { var $this = $(this); closeFABMenu($this); }); // Toggle-on-click behaviour. $(document).on('click.fixedActionBtn', '.fixed-action-btn.click-to-toggle > a', function(e) { var $this = $(this); var $menu = $this.parent(); if ($menu.hasClass('active')) { closeFABMenu($menu); } else { openFABMenu($menu); } }); }); $.fn.extend({ openFAB: function() { openFABMenu($(this)); }, closeFAB: function() { closeFABMenu($(this)); } }); var openFABMenu = function (btn) { $this = btn; if ($this.hasClass('active') === false) { // Get direction option var horizontal = $this.hasClass('horizontal'); var offsetY, offsetX; if (horizontal === true) { offsetX = 40; } else { offsetY = 40; } $this.addClass('active'); $this.find('ul .btn-floating').velocity( { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'}, { duration: 0 }); var time = 0; $this.find('ul .btn-floating').reverse().each( function () { $(this).velocity( { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'}, { duration: 80, delay: time }); time += 40; }); } }; var closeFABMenu = function (btn) { $this = btn; // Get direction option var horizontal = $this.hasClass('horizontal'); var offsetY, offsetX; if (horizontal === true) { offsetX = 40; } else { offsetY = 40; } $this.removeClass('active'); var time = 0; $this.find('ul .btn-floating').velocity("stop", true); $this.find('ul .btn-floating').velocity( { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'}, { duration: 80 } ); }; }( jQuery ));