0

理由はわかりませんが、元の状態に戻るときにアニメーションが少し途切れます。以下は、このための 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/

どんなアイデアも素晴らしいでしょう!!

4

2 に答える 2

4

それはあなたのパディングのためです。ゼロに設定するとスムーズです。

.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/

于 2013-04-03T04:19:27.783 に答える
0

jQuery UI Accordionの使用を考えたことはありますか? またはブートストラップ崩壊？簡単にリバースエンジニアリングして水平にすることができます。CSS3 トランジションを使用してアニメーションを実行できなくても、古いブラウザーのサポートが必要な場合は、フォールバックとして jQuery バージョンを実装できるため、これはスムーズです。

于 2013-04-03T04:06:32.800 に答える