Select2.js and jQuery slideDown animation lag/jitter

Question

I have a select2.js dropdown that I would like to animate; I would like the dropdown to slidedown instead of appear suddenly.

This is what I am doing now:

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

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

The problem is that the first time I open the drop down, there is a slight lag/jitter. Here is a more precise description of what is happening:

• Select container is clicked
• Select dropdown starts sliding down.
• 20% down the animation, it lags for like 0.2s (trying to eliminate that)
• Slide down then continues fine.

After the first time, the slideDown is flawless. It's just the first time that has the jitter/lag.

Any ideas?

Note that easeInOutQuint is coming from jQuery Mobile transitions.

Answer 1

You need to apply it on .select2-dropdown with timeout function check below code how i did achieve that

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