javascript - jquery animate ul by list item

Question

ユーザーがクリックしたliに基づいて、別の要素の垂直方向の中央に垂直方向に中央揃えしたいulがあります。ここでいくつかのコードを作成しました：

http://jsfiddle.net/XxmAT/1/

しかし、残念ながら、私が望むように動作していません。私の数学がオフになっていることはわかっているので、どんな助けも大歓迎です!

Answer 1

私はこれがよりきれいだと思います：

http://jsfiddle.net/XxmAT/33/

---

通常は、最初にロジックを考えてから、変数の作成を開始するのが最善です。変数のクラスターのため、すべてのコードで何を意味するのかを理解するのは困難でした。クリック機能がよりシンプルになり、目的の結果を得るために、どの数値から何を減算しているかを理解しやすくなりました...

補足:- 180最後はおそらく奇妙な (そして巨大な) 余白です。

Answer 2

どうぞ。li の高さを取得し、それを掛けて li 間のスペースの高さを考慮し、クリックされたインデックスを掛けました。

http://jsfiddle.net/XxmAT/36/

        var u_menu = $("#menu-main-menu").position().top;
        var z_menu = $("#menu-main-menu").height();

        var y = $("#box1").offset().top;
        var z = $('#box1').height();


        var c_menu = (z_menu / 2) ;


        $("#menu-main-menu").css('top', - c_menu);


        $('ul#menu-main-menu li').click(function (e) {
        // this is the dom element clicked
        var index = $('li').index(this);


         var x = $('li').height() * 2;

         var offset_li = (u_menu + y) / index  ;

        $('ul#menu-main-menu').animate({top: -(x*index)}, "slow")


    });​