jquery - jQuery スムーズな拡張/折りたたみアコーディオン/カルーセル

Question

以前のスタック オーバーフローの助けを借りて、ここでカルーセル/アコーディオンを作成する方法について回答を得ました。

http://www.jsfiddle.net/Mottie/UdUus/117/

全体が動くことなくスムーズに開閉できます。重要なのは、ほとんど使用されていないステップ プロパティでした。

ただし、このスクリプトを微調整して、オンロード、すべてのアイテムが同じ幅になり、ホバー時に必要に応じて拡大/縮小し、マウスを離すと元の状態に戻る方法を見つけようとしています。

私は試してみましたが、役に立ちませんでした。誰でもアイデアはありますか？

A.

Answer 1

HTML

<div id="promo">
        <ul>
            <li class="promo1">d</li>
            <li class="promo2">d</li>
            <li class="promo3">d</li>
            <li class="promo4">d</li>
            <li class="promo5">d</li>
        </ul>
    </div>

CSS：

#promo { width:404x; height:200px; overflow:hidden; }
#promo ul { width:105%; }
#promo li { float:left; height:200px; margin-right:1px; width:50px; }
#promo .promo1 { background:red;}
#promo .promo2 { background:green; }
#promo .promo3 { background:red; }
#promo .promo4 { background:green; }
#promo .promo5 { background:red; margin-right:0px; }

JS：

var panels = $('#promo li');

panels.hoverIntent(

function() {
    if (!$(this).is('.expanded')) {
        $(this).animate({
            width: 200
        }, {
            step: function(width, ani) {
                var w = Math.floor(width);
                $('.expanded').css('width', (250 - w) + 'px');
                $(ani.elem).css('width', (200 - w) + 'px');
            },
            duration: 500,
            complete: function() {
                panels.removeClass('expanded');
                $(this).addClass('expanded');
            }
        });
    }
}, function() {});

$("#promo").hover(function() {}, function() {

    $("li.expanded", this).animate({
        width: 50,
        duration: 500
    }).removeClass("expanded");

});

Answer 2

jsfiddleを更新しました