4

我花了半天时间尝试为自动完成下拉菜单应用淡入淡出效果......最终结果对我来说非常不舒服 - 看起来像“幸运拍摄”，而不是真正的解决方案。

例如，我使用了 jqueryui 默认演示，并添加了几行：

var acMenu = $("#tags").data().autocomplete.menu.activeMenu;
acMenu._basehide = acMenu.hide;
acMenu.hide = function(){
      this._basehide("fade","slow");
      };
acMenu._baseshow = acMenu.show;
acMenu.show = function(){
      this._baseshow("fade","slow");
      };

整个文件看起来像（© www.jqueryui.com）：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });

    var acMenu = $("#tags").data().autocomplete.menu.activeMenu;
    acMenu._basehide = acMenu.hide;
    acMenu.hide = function(){
          this._basehide("fade","slow");
          };
    acMenu._baseshow = acMenu.show;
    acMenu.show = function(){
          this._baseshow("fade","slow");
          }; 

  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


</body>
</html>

你能建议我更好的解决方案吗？

谢谢！

4

3 回答 3

4

由于您在那里使用 HTML5，因此您可以使用 CSS 转换来完成这项工作。

在自动完成实例的打开/关闭事件上添加/删除一个类：

$( "#tags" ).autocomplete({
  source: availableTags,
  open: function () { $('ul.ui-autocomplete').addClass('opened') },
  close: function () { 
    $('ul.ui-autocomplete')
      .removeClass('opened')
      .css('display','block'); 
  },
});

然后添加以下CSS：

.ui-autocomplete {
    opacity: 0;
    display: none;
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
}

.ui-autocomplete.opened {
    opacity: 1;
}

虽然我想你可以用 jQuery UI Fade to class 方法做同样的方法。注意：当页面上有超过 1 个自动完成时会产生奇怪的结果。

JSFiddle 上的示例

于 2012-12-20T22:53:59.673 回答
3

那这个呢？（不需要CSS）

$( "#tags" ).autocomplete({
    source: availableTags,
    open: function () { $('ul.ui-autocomplete').hide().fadeIn() },
    close: function () { $('ul.ui-autocomplete').show().fadeOut() }
});
于 2016-06-26T18:06:01.063 回答
1

如果有帮助，我已经创建了一个适用于项目中每个自动完成功能的功能，也许可以改进，但它可以工作

$(document).on('autocompleteopen', function(event, ui) {
  $(event.target).autocomplete('widget').hide().fadeIn('fast');
}).on('autocompleteclose', function(event, ui) {
  $(event.target).autocomplete('widget').show().fadeOut('fast');
});
于 2018-01-25T14:42:16.900 回答