2

任何人都知道从 Twitter 的 typeahead jQuery 插件中获取下拉菜单的一种相当简单的方法，该插件最初是 slideDown 或 fadeIn。我试图让下拉菜单的大小在调整大小时进行动画处理，但我至少会接受淡入淡出或初始滑入。我不想修改实际插件本身。

Typeahead 插件和演示可以在这里找到：https ://github.com/twitter/typeahead.js/

4

1 回答 1

1

如果您不想或无法编辑插件文件，则解决方案比应有的更复杂。他们提供了一个typeahead:opened事件；但是，出于淡化的目的，它不会在某些需要触发的情况下触发。因此，您基本上需要将事件侦听器附加到将触发和取消触发下拉列表的用户界面事件。

jQuery：

$(document).ready(function(){
    // Handle dropdown fade-in
    $('.typeahead').bind("keydown mousedown focus",function(){
        if (!$(".tt-dropdown-menu").is(":visible")) {
            $(".tt-dropdown-menu").stop(true).hide().fadeIn();
        }
    });
    // Handle dropdown fade-out
    $('.typeahead').on("typeahead:closed",function(){
        $(".tt-dropdown-menu").stop(true).show().fadeOut();
    });
});

注意：用.typeahead您输入的任何内容替换选择器。

如果您有能力编辑插件本身，您所要做的就是将以下字符串替换为对应的字符串以获取fadeIn和fadeOut工作。

非最小化版本（typeahead.js）：

  1. 替换this.$menu.css("display", "block");为this.$menu.stop(true).fadeIn();
  2. 替换this.$menu.hide();为this.$menu.stop(true).fadeOut();

最小化版本（typeahead.min.js）：

  1. 替换this.$menu.css("display","block")为this.$menu.stop(true).fadeIn()
  2. 替换this.$menu.hide()为this.$menu.stop(true).fadeOut()

注意：仅在 typeahead.js 的 0.9.3 版本中测试，使用 Chrome

于 2013-11-01T11:25:17.660 回答