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？还是Bootstrap Collapse？您可以轻松地将逆向工程设计为水平。如果你不能使用CSS3过渡来执行动画，那么这将很顺利，如果你需要旧的浏览器支持，你可以将jQuery版本作为后备实现。

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

2 个答案: