如何使用jquery-ui的toggleClass更好地实现动画效果？

Question

我有以下代码：

http://jsfiddle.net/zmhRK/

的问题是非常图形化的，所以我不认为我可以解释它比任何实际显示它在行动上的jsfiddle更好。问题是，当你按[切换]，然后你可以看到列表项正在扩展，在这个过渡效果中，你所看到的只是父母的背景颜色，这相当难看。所以，我想要的是列表项的内容在动画期间可见，而不是在动画之后才可见。

我知道这是可能的，如果我例如管理设置样式属性显示：在过渡元素块，但然后我需要某种回调函数来删除显示：块一旦过渡是完成。 Afaik，这个回调函数不存在。

任何想法如何我可以解决这个问题？

Answer 1

您可以使用.slideToggle()创建动画：

$(document).ready(function(){ 
    $('.sidebar-menu-item-controls').append('[toggle]').click(function(){ 

     //select the parent of this element, then select the next sibling, 
     //which is the UL associated with this click event 
     $(this).parent().next().slideToggle(300); 
    }); 
});​ 

这里是一个演示：http://jsfiddle.net/jasper/zmhRK/8/

注意，这也适用于您的嵌套的UL。