2

私はすばらしいSelectize.js pluginを使用しています。jQuery を使用してドロップダウンを開いたときに、単純なスライド アニメーションを追加しようとしています。また、位置を静的に変更します。

http://jsfiddle.net/TAuEH/1/

私はこれを変更しました：

/**
* 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);
},

ご覧のとおり、適切に開かず、閉じたときにスライドアップ アニメーションが表示されないのではないかと心配しています。

アドバイス、ヒント、ヘルプをいただければ幸いです。さらに情報が必要な場合は、投稿を編集します。

4

1 に答える 1

2

プラグイン コードを変更せずに、イベントonDropdownOpenを使用しonDropdownCloseてアニメーションを強制することができます。

少しハックですが、機能します。

コード：

$(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();
        }
    });
});

デモ: http://jsfiddle.net/IrvinDominin/cHxcZ/1/

于 2013-09-16T08:59:43.627 に答える