Question

我创建了一个动画链，我有两个问题：

init函数没有为第一个div.container
在我的mouseenter功能中，我必须使用-10作为#menu，因此宽度不会扩展到最后div.containers

此处位于jsFiddle

JS：

$(document).ready(function () {


        function init() {
            $('#menu').css({ 'width': $('.container:first').width(), 'height': $('.container:first').height() });
        }
        init();
        $('.menu-item').mouseover(function () {
            var curr = $(this).closest('.container');
            var next = curr.next('.container');
            var index = curr.index() + 1
            $('#menu').animate({ 'width': curr.position().left + curr.width() + next.width() - 9 /* don't know why i have to use -9*/ })
            .find('.container').css({ 'opacity': 0.5 })
            .filter('.container:nth-child(' + index + ')').nextAll().animate({ 'left': curr.position().left + curr.width() });
        });
    });

CSS：

.spacer
    {
        background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;
    }

HTML：

<table border="2" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px  ">
                <div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua">
                    <div class="menu-item">Menu Item 1</div>
                    <div class="menu-item">Menu Item 2</div>
                    <div class="menu-item">Menu Item 3</div>
                </div>
                <div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue">
                    <div class="menu-item">Menu Item 4</div>
                    <div class="menu-item">Menu Item 5</div>
                    <div class="menu-item">Menu Item 6</div>
                </div>
                <div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia">
                    <div class="menu-item">Menu Item 7</div>
                    <div class="menu-item">Menu Item 8</div>
                    <div class="menu-item">Menu Item 9</div>
                </div>
                <div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
                <div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
            </div>

        </td>
    </tr>
</table>

Answer 1

我不明白你的第一个问题，第二个问题的答案是-10应该是

$('#menu').position().left

您需要考虑菜单本身不对着屏幕边缘。

宽度和初始化问题

1 个答案: