我正在使用很棒的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
并强制动画。
这有点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();
}
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句