如何滑动切换 Selectize.js 下拉菜单？

Question

我正在使用很棒的Selectize.js plugin，并且我正在尝试在使用 jQuery 打开下拉菜单时添加一个简单的幻灯片动画。而且我也把位置改成静态的。

http://jsfiddle.net/TAuEH/1/

我改了这个：

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.css({visibility: 'hidden', display: 'block'});
  self.positionDropdown();
  self.$dropdown.css({visibility: 'visible'});
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.hide();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

通过这个：

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.slideDown();
  self.positionDropdown();
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.slideUp();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

好吧，如您所见，恐怕它无法正确打开，并且在您关闭它时不会执行上滑动画...有人有更好的主意吗？

我们将不胜感激任何建议、提示或帮助，如果您需要更多信息，我会编辑帖子。

Answer 1

在不改变插件代码的情况下，您可以尝试使用事件onDropdownOpen和onDropdownClose并强制动画。

这有点 hacky，但它确实有效。

代码：

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function () {
            $(".selectize-dropdown").hide().slideToggle();
        },
        onDropdownClose: function () {
            $(".selectize-dropdown").show().slideToggle();
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/cHxcZ/

编辑

在以前的版本中，当您尝试再次按输入关闭它时会出现问题，使用stop 解决。

参考：

当在一个元素上调用 .stop() 时，当前正在运行的动画 （如有）立即停止。例如，如果一个元素正在 调用 .stop() 时用 .slideUp() 隐藏，元素现在将 仍会显示，但将是其先前高度的一小部分。 不调用回调函数。

如果在同一个元素上调用了多个动画方法，则 稍后的动画被放置在元素的效果队列中。 在第一个动画完成之前，这些动画不会开始。什么时候 .stop() 被调用，队列中的下一个动画立即开始。 如果 clearQueue 参数的值为 true，则 队列中的其余动画将被删除并且永远不会运行。

代码：

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function ($dropdown) {
            $dropdown.stop().hide().slideToggle();
        },
        onDropdownClose: function ($dropdown) {
            $dropdown.stop().show().slideToggle();
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/cHxcZ/1/