Question

I have got a drop down menu which works fine but i want to add some jquery effects like animation , slideup, down ,

currently i m using visiblity hidden & visible to show the ul , how can i use other effect on it , below is the code :

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').bind('mouseover', openSubMenu);
         $('.ul-links > li').bind('mouseout', closeSubMenu);

         function openSubMenu() {
             $(this).find('ul').css('visibility', 'visible');
         };

         function closeSubMenu() {
             $(this).find('ul').css('visibility', 'hidden');
         };     });
  </script>

I tried using :$('ul', this).slideDown(100); $('ul', this).slideUp(100); with no success
css:

.quiklinks .ul-links li ul
 {
position:absolute;
visibility: hidden;

margin: 0px;
padding-top:0px;
z-index: 1000;
top: 42px;
left:0px;
 }

Any help will be highly appreciated

Answer 1

You can use the .animate() function rather than the .css() function:

 $(document).ready(function () {
     $('.ul-links > li').bind('mouseover', openSubMenu);
     $('.ul-links > li').bind('mouseout', closeSubMenu);

     function openSubMenu() {
         $(this).find('ul').animate({opacity : 1}, 500);
     };

     function closeSubMenu() {
         $(this).find('ul').animate({opacity : 0}, 500);
     };
 });

Documentation for .animate() can be found here: http://api.jquery.com/animate/

There are some pre-made animations as well:

$(this).find('ul').slideToggle(500);//http://api.jquery.com/slidetoggle/

$(this).find('ul').fadeToggle(500);//http://api.jquery.com/fadetoggle/

Here is a jsfiddle for using .slideToggle() and .fadeToggle(): http://jsfiddle.net/jasper/wFrpe/