具有绑定事件时的 SlideUp 或动画

Question

在下面的示例中，我很好奇如何仍然可以使用向上滑动和向下滑动来为 ul 的出现设置动画。我的困惑是，slideUp/slideDown 不显示，在这个例子中，你似乎使用了另一个 css 属性，可见性。在函数 jsddm_open 上，我希望 UL 滑入和滑出。感谢您抽出时间。

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   dmenuitem = $(this).find('ul').css('visibility', 'visible');

}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function(){  

$('#menudropdown > li').bind('mouseover', jsddm_open)
   $('#menudropdown > li').bind('mouseout',  jsddm_timer)

});

document.onclick = jsddm_close; 

Answer 1

查看 jquery 函数 .slideToggle()：

http://api.jquery.com/slideToggle/

这将允许您为元素设置动画，而不必检查它们当前的可见状态。

编辑

可以将选择器分配为变量并在函数之间传递它。

function jsddm_open()
{  
   var current_element = $(this);
   jsddm_canceltimer();   
   jsddm_close(current_element);

   $("ul", this).slideDown();
}

function jsddm_close(current_element)
{  
    if(ddmenuitem) ddmenuitem.css('display', 'none'){
      current_element.slideUp();}

;}