如何给控制隐藏li元素显示的jQuery分类展开按钮添加过渡动画效果

实现思路 #

你现在用的toggle()方法是直接修改元素的display属性，属性切换是跳变的所以没有过渡效果，想要加平滑动画可以参考下面两个方案：

• 方案一：直接替换jQuery方法，用自带的滑动/渐变动画方法，改动最小就能拿到可用的过渡效果
• 方案二：结合CSS过渡实现，性能更好，也可以自定义动画的速度、曲线等参数

具体实现代码 #

方案一：使用jQuery自带slideToggle()实现（推荐，改动最小） #

只需要把原来的toggle()替换成slideToggle()即可，还可以传入参数控制动画时长，比如填300就是300毫秒完成动画：

var max = 10;
jQuery('#menu-categories').each(function () {
    if (jQuery(this).find('li').length > max) {
        jQuery(this).find('li:gt(' + max + ')').hide().end().append('<li class="sub_accordian"><div class="show_more">More Categories</div></li>');

        jQuery(this).find('.sub_accordian').click(function (e) {
            // 把toggle替换成slideToggle，300是动画时长，单位毫秒
            jQuery(this).siblings(':gt(' + max + ')').slideToggle(300);
            if (jQuery(this).find('.show_more').length) {
                jQuery(this).html('<div class="show_less">Close Menu</div>');
            } else {
                jQuery(this).html('<div class="show_more">More Categories</div>');
            };
        });
    };
});

如果你想要渐变效果，把slideToggle换成fadeToggle(300)就可以。

方案二：CSS过渡+切换class实现（性能更优，可自定义性强） #

先加对应的CSS样式：

#menu-categories li {
  overflow: hidden;
  /* 定义高度和透明度的过渡效果，0.3s时长，缓动曲线ease */
  transition: all 0.3s ease;
  height: 32px; /* 这里改成你实际每个li的高度 */
  opacity: 1;
}
#menu-categories li.hidden-item {
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

再修改JS逻辑，初始给超出的li加hidden-item类，点击的时候切换类即可：

var max = 10;
jQuery('#menu-categories').each(function () {
    var $list = jQuery(this);
    if ($list.find('li').length > max) {
        // 初始给超出的li加隐藏类
        $list.find('li:gt(' + max + ')').addClass('hidden-item').end().append('<li class="sub_accordian"><div class="show_more">More Categories</div></li>');

        $list.find('.sub_accordian').click(function (e) {
            $list.find('li:gt(' + max + ')').toggleClass('hidden-item');
            if (jQuery(this).find('.show_more').length) {
                jQuery(this).html('<div class="show_less">Close Menu</div>');
            } else {
                jQuery(this).html('<div class="show_more">More Categories</div>');
            };
        });
    };
});

内容的提问来源于stack exchange，提问作者waleed ali mian