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 Fadetoclassメソッドを使用して同じメソッドを実行できると思いますが。注： 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 に答える