使用slideup,向下滑动jquery效果以获取下拉菜单

时间:2011-11-15 17:37:46

标签: jquery jquery-animate drop-down-menu jquery-slide-effects

我有一个下拉菜单,工作正常,但我想添加一些jquery效果,如动画,幻灯片,向下,

目前我正在使用visiblity hidden&可见以显示ul,我如何使用其他效果,下面是代码:

 <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>

我尝试使用:$('ul', this).slideDown(100); $('ul', this).slideUp(100);但没有成功 的CSS:

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

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

任何帮助都将受到高度赞赏

2 个答案:

答案 0 :(得分:2)

您可以使用.animate()功能而不是.css()功能:

 $(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);
     };
 });

.animate()的文档可在此处找到:http://api.jquery.com/animate/

还有一些预先制作的动画:

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

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

以下是使用.slideToggle().fadeToggle()的jsfiddle:http://jsfiddle.net/jasper/wFrpe/

答案 1 :(得分:1)

您可以使用.slideToggle().fadeToggle()。通过组合几个these functions可以实现高级效果,或者您可以使用jQuery动画插件来获得其他效果。

我还使用.hover()

简化了事件绑定
 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').hover(toggleMenu, toggleMenu);

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

我注意到您还在样式表中使用了visibility:hidden;。你应该删除它,因为它与jQuery使用显示样式修改是否可以看到元素的方式冲突。

你可以通过调用hide()来实现:

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

奖金提示:

使用动画时,请始终在它们之前添加.stop(true, true),否则如果用户在上一个动画完成之前多次与其互动,您就会有怪癖。