jQuery動畫問題

Question

我在jquery中使用動畫函數，但它工作奇怪。它有什麼問題？

下面是一些代碼：

這裏是我的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插件更新菜單（高亮顯示的可視面板）時，塊進入視野，你可以檢查出來，如果你有興趣。第二個演示顯示了水平和垂直排列塊的菜單。