Javascript 如何滑动切换Selectize.js下拉列表？

我正在使用真棒，我正在尝试在使用jQuery打开下拉列表时添加一个简单的幻灯片动画。我也把位置改成静态

我改变了一个观点：

/**
* 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);
},

好的，正如你所看到的，我担心它不能正常打开，而且当你关闭它时，它也不能做幻灯片动画。。。有谁有更好的主意去做吗

---

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

在插件代码没有任何更改的情况下，您可以尝试使用事件

onDropdownOpen

和

onDropdownClose

并强制播放动画

这有点老套，但很管用

代码：

演示：

编辑 在以前的版本中，再次按下输入按钮尝试关闭时出现问题，请使用

stop

解决

参考：

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

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

代码：

---

演示：

谢谢，它很有效！但当你再次按下输入按钮试图关闭它时，会出现问题。。。你能纠正这个问题吗？另一个想法是：Selectize添加了一个“DropdownActive”类。您可以使用CSS3转换来执行没有JS的动画。我现在没有时间，但我可以试着在一天左右制作一个示例。@brianreavis感谢您的停止建议，对于CSS3，这是一个解决方案，但可能会失去跨浏览器支持？太好了！但恐怕第二版也有问题。当您再次按下输入以将其关闭时，不会关闭。有什么办法吗？太好了！，但最后一件事：当你按下输入键关闭它时，它仍然显示为打开（白色，箭头指向顶部）。

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

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