如何使用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。