jquery - 使用动画宽度时 jQuery 动画不流畅：使用水平手风琴菜单“切换”

Question

不知道为什么，但是当我回到原来的状态时，我的动画有点断断续续。下面是 jsfiddle 的链接：

$('.char-more').click(function () {
    var $curr = $(this).closest('.widgetWrap'),
        $prevActive = $('.activeClass').not($curr);
    //$prevActive.removeClass('activeClass');
    $prevActive.find('.acontent').animate({
        width: 'toggle'
    }, {
        duration: 500,
        easing: 'easeOutExpo',
        queue: false
    });
    $curr.toggleClass('activeClass').find('.acontent').animate({
        width: 'toggle'
    }, {
        duration: 500,
        easing: 'easeOutExpo',
        queue: false,
        complete: function () {
            $prevActive.removeClass('activeClass');
        }
    });
});

http://jsfiddle.net/EKZq8/3/

任何想法都会很棒！

Answer 1

这是因为你的填充。如果将其设置为零，则很平滑：

.widgetWrap > .acontent {
    background: none repeat scroll 0 0 #F7F7F7;
    display: none;
    float: right;
    font-size: 10px;
    height: 93px;
    margin: 0;
    padding: 0px;
    width: 240px;
}

工作小提琴：http: //jsfiddle.net/basarat/EKZq8/6/

Answer 2

你想过使用jQuery UI Accordion吗？或引导崩溃？您可以轻松地逆向工程为水平。如果你不能使用 CSS3 过渡来执行动画，这将是平滑的，因为如果你需要旧的浏览器支持，你可以实现 jQuery 版本作为后备。