Using slideup , slide down jquery effects for drop down menu

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

Jasper · Accepted Answer · 2011-11-15T17:48:07.440

2

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/

edited Nov 15 '11 at 17:48

answered Nov 15 '11 at 17:41

Jasper

75,717
14
151
146

i tried ur example but it doesnt works do i have to change css for it – Mr A Nov 15 '11 at 17:43
I used `opacity` rather than `visibility` so if your elements are set to `visibility:hidden` by default, that would need to change to `opacity:0;filter:alpha(opacity=0);` (note: the `filter` is for I.E.). – Jasper Nov 15 '11 at 17:44
wat abt slide up slide down , and the toggle one is not working – Mr A Nov 15 '11 at 17:50
added the css in the question – Mr A Nov 15 '11 at 17:51
Instead of `visibility: hidden;`, use `opacity:0;` (if you want to animate opacity like my example above) or `display:none;` (if you want to use the toggle functions): http://jsfiddle.net/jasper/wFrpe/1/ – Jasper Nov 15 '11 at 17:58

Samuel Liew · Answer 2 · 2011-11-15T18:11:02.217

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.

tried ur example but nuthing works drop down doesnt shows ny sub products , added the css in the question — Mr A, Nov 15 '11 at 17:52

Using slideup , slide down jquery effects for drop down menu

2 Answers2