CODEWITHSUNDEEP
jquery
Reddy
Reddy

Reputation: 1385

Help me to apply fadeIn on Dropdown menu

I am trying to apply fadeIn effect on Dropdown menu.When user clicks on dropdown the menu should be displayed in a very slow motion.For that i am using fadeIn()..
Below is HTML code and jQuery code.
I know my code is not correct, hope someone will help me.

 <select  tabindex="21" name="S8a3_201" id="S8a3_201"  class="dropdown">
 <option value="">Select answer</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 <option value="6">Six</option>
 <option value="995">Seven</option>
 </select>

The code i have written is 

$('select').click(function()
              {
                  $(this).fadeIn('slow', function() {
    // Animation complete
  });
              });

Upvotes: 0

Views: 437

Answers (2)

Chris Pratt
Chris Pratt

Reputation: 239380

Select boxes are operating system controls, you're not going to be able to control how the drop down they present comes into view. Even if you could, it wouldn't be standard across all operating systems.

Upvotes: 1

Jordan
Jordan

Reputation: 32542

You don't have any control over the way the control itself works or displays using any combination of javascript or CSS. If you must have the animated fade on a dropdown you will have to reimplement a dropdown list using content within a containing <div> instead.

jQuery has several of these as plugins already.

http://plugins.jquery.com/plugin-tags/jquery-dropdown

jQuery UI also has a split button component you could use: http://jqueryui.com/demos/button/#splitbutton

Upvotes: 1

Related Questions