Question

我在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>

这是我的样式表

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


     }

     div#inner {
        width: 4515px;
    }

    div#inner div {
        float:left;
        width: 900px;
        margin-right: 3px;

    }

这是我的脚本

 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);
}

Answer 1

更改marginLeft可能不是最好的方法......它可能会这样，但我认为使用left最好。

我更改了css使#inner具有相对位置并更改了代码以设置包含左侧位置的对象。这是demo。

HTML

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

更新了CSS：

#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;
});

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

jQuery动画问题

1 个答案: