javascript - jquery 通过列表项为 ul 设置动画

Question

我有一个 ul ，我想根据用户单击的 li 将其垂直居中到另一个元素的垂直中心。我在这里处理了一些代码：

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")


    });​