CODEWITHSUNDEEP
jqueryjquery-animatedrop-down-menujquery-slide-effects
Mr A
Mr A

Reputation: 6768

Using slideup , slide down jquery effects for drop down menu

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

Upvotes: 2

Views: 5481

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79042

You can use .slideToggle() or .fadeToggle(). Advanced effects can be achieved by combining several of these functions, or you can use a jQuery animation plugin for additional effects.

I also simplified your event binding by using .hover()

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').hover(toggleMenu, toggleMenu);

         function toggleMenu() {
             $(this).find('ul').stop(true, true).slideToggle();
         } 
     });
 </script>

I noticed you are also using visibility:hidden; in your stylesheet. You should remove this, as it conflicts with the way jQuery uses the display style to modify whether an element can be seen.

You can do it by calling a hide() instead:

 $('.ul-links > li').hide().hover(toggleMenu, toggleMenu);

BONUS TIP:

When using animations, always include .stop(true, true) before them, otherwise you will have quirks if the user interact with it many times before the previous animation has completed.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

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/

Upvotes: 2

Related Questions