Question

我正在使用真棒Selectize.js plugin，我正在尝试使用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);
},

嗯，正如你所看到的，我担心它无法正常打开，并且当你关闭它时不会做幻灯片动画......任何人都有更好的想法吗？

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

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（）时，当前正在运行的动画   （如果有的话）立即停止。例如，如果有一个元素   隐藏.slideUp（）当调用.stop（）时，该元素将立即生效   仍然显示，但将是其先前高度的一小部分。   不调用回调函数。

如果在同一个元素上调用多个动画方法，则   以后的动画放置在元素的效果队列中。   这些动画直到第一个动画完成才会开始。什么时候   调用.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/

如何slideToggle Selectize.js下拉列表？

1 个答案:

修改