materialbox.js in materialize-sass-0.95.3.3

- old
+ new

@@ -16,28 +16,31 @@
       var outDuration = 200;
       var origin = $(this);
       var placeholder = $('<div></div>').addClass('material-placeholder');
       var originalWidth = 0;
       var originalHeight = 0;
-
       origin.wrap(placeholder);
+      
+      
       origin.on('click', function(){
-
         var placeholder = origin.parent('.material-placeholder');
         var windowWidth = window.innerWidth;
         var windowHeight = window.innerHeight;
         var originalWidth = origin.width();
         var originalHeight = origin.height();
+        
 
         // If already modal, return to original
         if (doneAnimating === false) {
+          returnToOriginal();
           return false;
         }
         else if (overlayActive && doneAnimating===true) {
           returnToOriginal();
           return false;
         }
+        
 
         // Set states
         doneAnimating = false;
         origin.addClass('active');
         overlayActive = true;
@@ -48,11 +51,13 @@
           width: placeholder[0].getBoundingClientRect().width,
           height: placeholder[0].getBoundingClientRect().height,
           position: 'relative',
           top: 0,
           left: 0
-        })
+        });
+        
+        
 
         // Set css on origin
         origin.css({position: 'absolute', 'z-index': 1000})
         .data('width', originalWidth)
         .data('height', originalHeight);
@@ -171,16 +176,24 @@
           var placeholder = origin.parent('.material-placeholder');
           var windowWidth = window.innerWidth;
           var windowHeight = window.innerHeight;
           var originalWidth = origin.data('width');
           var originalHeight = origin.data('height');
+       
+          origin.velocity("stop", true);
+          $('#materialbox-overlay').velocity("stop", true);
+          $('.materialbox-caption').velocity("stop", true);
 
 
-          $('#materialbox-overlay').fadeOut(outDuration, function(){
-            // Remove Overlay
-            overlayActive = false;
-            $(this).remove();
+          $('#materialbox-overlay').velocity({opacity: 0}, {
+            duration: outDuration, // Delay prevents animation overlapping
+            queue: false, easing: 'easeOutQuad',
+            complete: function(){
+              // Remove Overlay
+              overlayActive = false;
+              $(this).remove();
+            }
           });
 
           // Resize Image
           origin.velocity(
             {
@@ -195,11 +208,11 @@
             }
           );
 
           // Remove Caption + reset css settings on image
           $('.materialbox-caption').velocity({opacity: 0}, {
-            duration: outDuration + 200, // Delay prevents animation overlapping
+            duration: outDuration, // Delay prevents animation overlapping
             queue: false, easing: 'easeOutQuad',
             complete: function(){
               placeholder.css({
                 height: '',
                 width: '',
@@ -208,11 +221,10 @@
                 left: ''
               });
 
               origin.css({
                 height: '',
-                position: '',
                 top: '',
                 left: '',
                 width: '',
                 'max-width': '',
                 position: '',
@@ -232,6 +244,6 @@
 
 $(document).ready(function(){
   $('.materialboxed').materialbox();
 });
 
-}( jQuery ));
\ No newline at end of file
+}( jQuery ));