Update animation support (#768)

SteveTheTechie · mlh758 · commit 1d167998f912 · 2018-03-16T14:30:57.000-05:00
Update animation support

Aligns animation options with current .show() &amp; .hide() signatures.
diff --git a/demos/animations.htm b/demos/animations.htm
@@ -14,30 +14,29 @@
 <script type="text/javascript">
 $(function(){
 
-   $("#test-1").multiselect({
-      show: ["bounce", 200],
-      hide: ["explode", 1000]
-   });
-   
-   $("#test-2").multiselect({
-      show: "bounce",
-      hide: "explode"
-   });
+	$("#test-1").multiselect({
+		openEffect: ["bounce", 200],
+		closeEffect: ["explode", 1000]
+	});
+	
+	$("#test-2").multiselect({
+		openEffect: "bounce",
+		closeEffect: "explode"
+	});
 
 });
 </script>
 </head>
 <body onload="prettyPrint();">
 
 <h2>Show/hide with Animation</h2>
-<p>Using animations with the show and hide parameters.  Either pass an array with the effect name and the speed, or just specify the name of an effect.  If you don't
-specify a speed, the default of 400ms will be used.</p>
+<p>Using animations with the openEffect and closeEffect parameters.  Either pass an array with the effect name and the speed, an object of animation parameters, or just specify the name of an effect.  If you don't specify a speed, the default of 400ms will be used.</p>
 
 <h3>Specifying different show and hide speeds</h3>
 <pre class="prettyprint">
 $("#test-1").multiselect({
-   show: ["bounce", 200],
-   hide: ["explode", 1000]
+   openEffect: ["bounce", 200],
+   closeEffect: ["explode", 1000]
 });
 </pre>
 <select id="test-1" multiple="multiple" size="5">
@@ -51,8 +50,8 @@ <h3>Specifying different show and hide speeds</h3>
 <h3>Only passing the name of an effect</h3>
 <pre class="prettyprint">
 $("#test-2").multiselect({
-   show: "bounce",
-   hide: "explode"
+   openEffect: "bounce",
+   closeEffect: "explode"
 });
 </pre>
 <select id="test-2" multiple="multiple" size="5">
diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
@@ -1371,25 +1371,25 @@
       var $header = this.$header;
       var $labels = this.$labels;
       var $inputs = this.$inputs.filter(':checked:not(.ui-state-disabled)');
-      var speed = this.speed;
       var options = this.options;
       var effect = options.openEffect;
       var scrollX = window.scrollX;
       var scrollY = window.scrollY;
 
-      // figure out opening effects/speeds
-      if (effect && effect.constructor == Array) {
-        speed = effect[1] || speed;
-        effect = effect[0];
-      }
-
       // set the scroll of the checkbox container
       this.$checkboxes.scrollTop(0);
 
       // show the menu, maybe with a speed/effect combo
-      // if there's an effect, assume jQuery UI is in use
-      if (effect) {
-         $.fn.show.apply($menu, effect ? [ effect, speed ] : []);
+      if (!!effect) {
+         if (typeof effect == 'string') {
+            $.fn.show.call($menu, effect, this.speed);
+         }
+         else if (typeof effect == 'object' && effect.constructor == Array) {
+            $.fn.show.call($menu, effect[0], effect[1] || this.speed);
+         }
+         else if (typeof effect == 'object' && effect.constructor == Object) {
+            $.fn.show.call($menu, effect);
+         }
       }
       else {
          $menu.css('display','block');
@@ -1424,31 +1424,30 @@
 
     // Close the menu
     close: function() {
-      var self = this;
-
       // bail if the multiselect close event returns false
       if (this._trigger('beforeclose') === false || !!this.options.listbox) {
         return;
       }
 
+      var $menu = this.$menu;
       var options = this.options;
       var effect = options.closeEffect;
-      var speed = this.speed;
       var $button = this.$button;
 
-      // figure out closing effects/speeds
-      if (effect && effect.constructor == Array) {
-        speed = effect[1] || speed;
-        effect = effect[0];
-      }
-
       // hide the menu, maybe with a speed/effect combo
-      // if there's an effect, assume jQuery UI is in use
-      if (effect) {
-         $.fn.hide.apply(this.$menu, effect ? [ effect, speed ] : []);
+      if (!!effect) {
+         if (typeof effect == 'string') {
+            $.fn.hide.call($menu, effect, this.speed);
+         }
+         else if (typeof effect == 'object' && effect.constructor == Array) {
+            $.fn.hide.call($menu, effect[0], effect[1] || this.speed);
+         }
+         else if (typeof effect == 'object' && effect.constructor == Object) {
+            $.fn.hide.call($menu, effect);
+         }
       }
       else {
-         this.$menu.css('display','none');
+         $menu.css('display','none');
       }
 
       $button.removeClass('ui-state-active').trigger('blur').trigger('mouseleave');
