Select2.js und jQuery slideDown Animation Verzögerung / Jitter - Javascript, Jquery, Animation, auswählen

Ich habe eine select2.js-Dropdown-Liste, die ich animieren möchte. Ich möchte, dass das Dropdown-Menü nicht plötzlich angezeigt wird.

Das mache ich jetzt:

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

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

Das Problem ist, dass das erste Mal, wenn ich die Dropdown-Liste öffne, eine leichte Verzögerung auftritt. Hier ist eine genauere Beschreibung des Geschehens:

• Container auswählen wird angeklickt
• Wählen Sie das Dropdown-Menü aus.
• 20% weniger als die Animation, es dauert 0,2 Sekunden (versucht das zu beseitigen)
• Nach unten schieben, dann weiter.

Nach dem ersten Mal ist der SlideDown einwandfrei. Es ist nur das erste Mal, dass Jitter / Lag auftritt.

Irgendwelche Ideen?

Beachten Sie, dass easeInOutQuint von jQuery Mobile-Übergängen stammt.

Antworten:

Sie müssen es auf .select2-dropdown mit Timeout-Funktionsprüfung anwenden, unter dem Code, wie ich das erreicht habe

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