Question

我有一个想要动画的select2.js下拉列表;我希望下拉滑落而不是突然出现。

这就是我现在正在做的事情：

var select = $("#select").select2({
     minimumResultsForSearch: -1
});

$('#select').on('select2:open', function (e) {
    $("#select option[value='0']").remove();
    $('.select2-results').hide().slideDown("slow", "easeInOutQuint");
});

问题是我第一次打开下拉时，会出现轻微的滞后/抖动。以下是对所发生情况的更准确描述：

点击选择容器
选择下拉列表开始向下滑动。
动画减少了20％，它落后于0.2s（试图消除它）
向下滑动然后继续正常。

第一次之后，slideDown完美无瑕。这是第一次出现抖动/延迟。

有什么想法吗？

请注意，easeInOutQuint来自jQuery Mobile转换。

Answer 1

你需要将它应用于.select2-dropdown with timeout function检查下面的代码我是如何实现的

jQuery('#select').on('select2:open', function (e) {
   jQuery('.select2-dropdown').hide();
   setTimeout(function(){ jQuery('.select2-dropdown').slideDown("slow", "easeInOutQuint"); }, 200);
});

Select2.js和jQuery slideDown动画延迟/抖动

1 个答案: