Javascript jQuery动画问题

我正在jquery中使用animate函数，但它工作起来很奇怪。怎么了

下面是一些代码：

这是我的html页面

        <ul class="menu red">
      <li class="current"><a href="javascript:" onclick="nexthome()" target="_self">Home</a></li>
      <li><a href="javascript:" onclick="nextbio()" target="_self">Bio</a></li>
      <li><a href="javascript:" onclick="nextport()" target="_self">Portfolio</a></li>
      <li><a href="javascript:" onclick="nextpric()" target="_self">Pricing</a></li>
      <li><a href="javascript:" onclick="nextcon()" target="_self">Contact</a></li>
      </ul>

       </div> <!-- End menu -->

      </div> <!-- End header -->
      <div id="content">
      <div id="inner">
            <div id="Home">
            home</div>
            <div id="Bio">bio</div>
            <div id="Portfolio">port</div>
            <div id="Pricing">pric</div>
            <div id="Contact">con</div>
        </div>

这是我的剧本

 function nexthome() {

    $('#inner').animate({marginLeft: '0px'}, 1200);
}

 function nextbio() {

    $('#inner').animate({marginLeft: '-1806px'}, 1200);
}

 function nextport() {

    $('#inner').animate({marginLeft: '2709px'}, 1200);
}

 function nextpric() {

    $('#inner').animate({marginLeft: '3612px'}, 1200);
}

 function nextcon() {

    $('#inner').animate({marginLeft: '4515px'}, 1200);
}

---

更改

marginLeft

可能不是最好的方法。。。它可能是这样工作的，但我认为使用

left

将是最好的

我更改了css以使

#internal

具有相对位置，并更改了代码以设置包含左侧位置的对象。这是一本书

HTML

更新脚本

// uses the exact name from the menu
var leftEdge = {
    'Home'      : 0,
    'Bio'       : 903,
    'Portfolio' : 1806,
    'Pricing'   : 2712,
    'Contact'   : 3617
};

$('.menu a').click(function() {
    var name = $(this).text(); // grabs the name from the menu
    $('#inner').animate({
        left: -leftEdge[name] + 'px'
    }, 1200);
    return false;
});

---

实际上，我有一个插件，名为更新菜单（突出显示可见面板），当一个块进入视图时，如果您感兴趣，可以查看它。第二个演示显示了在水平和垂直排列块上工作的菜单。

请比“奇怪工作”更具体。到底发生了什么？调用这些函数时，您希望发生什么？

<ul class="menu red">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
</ul>

</div> <!-- End menu -->

</div> <!-- End header -->
<div id="content">
    <div id="inner">
        <div id="Home">home</div>
        <div id="Bio">bio</div>
        <div id="Portfolio">port</div>
        <div id="Pricing">price</div>
        <div id="Contact">contact</div>
    </div>
</div>

#content {
    overflow:hidden;
    width: 900px;    
}

div#inner {
    position: relative;
    top: 0;
    left: 0;
    width: 5500px;
}

div#inner div {
    float:left;
    width: 900px;
    height: 200px;
    border: #000 1px solid;
    margin-right: 3px;
}

// uses the exact name from the menu
var leftEdge = {
    'Home'      : 0,
    'Bio'       : 903,
    'Portfolio' : 1806,
    'Pricing'   : 2712,
    'Contact'   : 3617
};

$('.menu a').click(function() {
    var name = $(this).text(); // grabs the name from the menu
    $('#inner').animate({
        left: -leftEdge[name] + 'px'
    }, 1200);
    return false;
});