2

我有一个工作正常的下拉菜单，但我想添加一些 jquery 效果，如动画、上滑、下移、

目前我使用可见性隐藏和可见来显示 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;
 }

任何帮助将不胜感激

4

2 回答 2

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()和的jsfiddle：http .fadeToggle(): //jsfiddle.net/jasper/wFrpe/

于 2011-11-15T17:41:17.980 回答
1

您可以使用.slideToggle()或.fadeToggle()。可以通过组合其中的几个功能来实现高级效果，或者您可以使用 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)在它们之前包含，否则如果用户在上一个动画完成之前与其多次交互，您将有怪癖。

于 2011-11-15T17:41:36.573 回答