Chosen.js：使用幻灯片效果为下拉菜单设置动画答案

【问题标题】：Chosen.js: animating the dropdown with slide effectChosen.js：使用幻灯片效果为下拉菜单设置动画
【发布时间】：2013-01-27 08:01:49
【问题描述】：

所以，chosen 插件很棒。有谁知道如何在下拉选择框中添加一点效果，使其在单击时滑下/上滑，而不是在没有动画的情况下弹出？

【问题讨论】：

标签： javascript jquery jquery-chosen

【解决方案1】：

您的问题有解决方案。

css:

规则.chosen-container

添加

display: none;

并删除

left: -9999px;

现在我们必须绑定一些事件：

$('.chosen-select').on('chosen:showing_dropdown', function() {
    $(this).next('.chosen-container').children('.chosen-drop').slideDown(400);
}).on('chosen:hiding_dropdown', function () {
    $(this).next('.chosen-container').children('.chosen-drop').slideUp(400);
});

就是这样！

【讨论】：

很好的解决方法，但是您需要像这样编辑 selected.css：查找：.chosen-container .chosen-drop {... 删除：left: -9999px; 添加：display: none; 查找：.chosen-container.chosen-with-drop .chosen-drop {... 删除：left: 0;

【解决方案2】：

Chosen 没有太多的 API，所以我正在使用 Select2，它是 Chosen 的更高级的继任者。从 Chosen 到 Select2 的语法切换相当简单。

这会让您关闭，但 Select2 会在关闭时隐藏搜索结果。你必须处理那个。

http://jsfiddle.net/isherwood/9WgAB/

$("#mySelect").select2().on('open',function(){
    $('.select2-drop').hide().slideDown();
}).on('close',function(){
    $('.select2-drop').show().slideUp();
});

【讨论】：

哦，不知道 Select2。将尝试您的建议并尽快在这里报告。
很棒的插件，但 JSFiddle 示例没有动画。当前的 Safari 和 Chrome。
该脚本不适用于较新版本的 select2