2

我正在使用很棒的Selectize.js 插件，并且我正在尝试在使用 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);
},

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

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

4

1 回答 1

2

无需对插件代码进行任何更改，您可以尝试使用事件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/

于 2013-09-16T08:59:43.627 回答