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
Hassan
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
Rusher
source
to share
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
isherwood
source
to share