jquery - mouseover mouseout が複数の ul でアニメーションを動作させない

Question

私のスクリプトを複数のULで機能させる方法を知っている人はいますか?

私の jsfiddleを見てください。
ご覧のとおり、スクリプトはマウスオーバーの 2 番目の ul に対してのみ機能します。

よろしくお願いします！
敬具、
ジョナサン

Answer 1

では、何が起こっていたのか説明しましょう。最後に作成された div のみを選択していたため、その div のみが使用されていました。

.active選択されたものと選択されたものを見つけなければなりませんでしたdiv

次に例を示します。

http://jsfiddle.net/JoshuaPack/YFUsJ/23/

これmouseoverを一番上に追加して変更activeし、animationvars

    active = $(this).parent().find('.active');
    animation = $(this).parent().find('div');

でこれmouseoutを追加しました。

    active = $(this).find('.active');
    animation = $(this).find('div');

編集:activeクラスを他の<li>オブジェクトに 移動する際の問題については<div>、各.activeクラスを個別に追加する必要があります。例を次に示します。

http://jsfiddle.net/JoshuaPack/YFUsJ/31/

私がしたことは、アニメーション変数を.each

$.each(active, function() {
    var animation = $('<div>').css({
        'position': 'absolute',
        'height': $(this).outerHeight()-1,
        'width': $(this).outerWidth(),
        'marginTop': ($(this).parent().index() * $(this).outerHeight()),
        'borderBottom': '1px solid #000',
        'z-index': -10
    });
    $(this).parent().parent().prepend(animation);
});

代わりに、または以前の<ul>ように前に付けて、クラスのメニューに常に存在する必要がある親の親にそれを行いましたactive。