Clever Geek Handbook

Chosen.js: animation dropdown menu with slide effect

So the chosen plugin works great. Does anyone know how I can add a little influence to the dropdown select box to make it slideDown / slideUp when clicked rather than pop up without animation?

+3


source to share


2 answers


there is a solution for your problem.

CSS

the rule .chosen-container

add

display: none;


and remove

left: -9999px;

Now we have to link some events:

$('.chosen-select').on('chosen:showing_dropdown', function() {
    $(this).next('.chosen-container').children('.chosen-drop').slideDown(400);
}).on('chosen:hiding_dropdown', function () {
    $(this).next('.chosen-container').children('.chosen-drop').slideUp(400);
});

What all!

+2


source


Chosen doesn't have many APIs, so I'm working with Select2 , the more advanced successor to Chosen. The syntax switch from Chosen to Select2 is pretty trivial.

This brings you closer, but Select2 hides the search results when closed. You have to deal with this.



http://jsfiddle.net/isherwood/9WgAB/

$("#mySelect").select2().on('open',function(){
    $('.select2-drop').hide().slideDown();
}).on('close',function(){
    $('.select2-drop').show().slideUp();
});
+1


source






More articles:


All Articles