js滑動菜單幫助 - 動畫延遲在中間？

我正在尋找一個具有某種特定功能的菜單。我相對較新的JavaScript和jQuery，所以我不知道從哪裏開始。以下是我想做的事情：js滑動菜單幫助 - 動畫延遲在中間？

js problem

鼠標懸停在鏈接4和5還繼續讓他們留在自己的最終動畫狀態。

有什麼建議嗎？我嘗試過使用CSS3動畫做這件事，但在用戶停止在鏈接3上懸停後，我無法讓它暫停，然後再向後滑動。我還遇到了鏈接3和鏈接4之間的空白問題，導致懸停停止。 Javascript似乎是更好的選擇。

這是有我的CSS3動畫在它的相關代碼：

-webkit-transition: all .2s ease 0s; 
-moz-transition: all .2s ease 0s; 
-o-transition: all .2s ease 0s; 
-ms-transition: all .2s ease 0s; 
transition: all .2s ease 0s;

編輯：我和我現在的CSS3動畫的jsfiddle更新（它看起來有點不同在jsfiddle上的實時預覽比在我的網站上）。

來源

2013-04-18 shanling

你嘗試過什麼？你有一些代碼可以告訴我們嗎？這將有助於爲您提供答案。 – excentris 2013-04-18 07:40:09

我甚至不知道從哪裏開始！我試過尋找開源的jQuery，我可以編輯，以適應我的網頁，但沒有運氣。（我可以發佈我的css3動畫，我到目前爲止，如果你想 – shanling 2013-04-18 07:46:57

你可以開始這樣做。有人可能有一個解決方案，而不需要jQuery，只需與css3。你應該也標記你的問題'css3'在當前標籤旁邊，所以更多的人會看到你的問題;） – excentris 2013-04-18 07:52:59

頂部菜單的第三個'li'寬度已經擴展，因此當您將光標移動到'extralinks'菜單時，後者不會滑出視圖。

純CSS解決方案：Jsfiddle Link

CSS：

* { 
    padding:0; 
    margin:0; 
} 
.links { 
    width:100%; 
} 

.links > menu { 
    left: 0%; 
    text-align:center; 
    position: fixed; 
    z-index: 4; 
} 

.links menu li { 
    whitespace: nowrap; 
    display: inline-block; 
    margin-right: 30px; 
    position: relative; 
    padding: 0; 
    height: 40px; 
    top: 24px; 
    z-index: 4; 
    float:left; 
} 

.links a, a:visited { 
    font-family: RobotoLight; 
    text-decoration: none; 
    text-transformation: none; 
    weight: normal; 
    font-size: 18px; 
    color: #000000; 
    z-index: 4; 
    float:left; 
    height: 100%; 
} 

.links a:hover { 
    font-family: RobotoLight; 
    text-decoration: none; 
    text-transformation: none; 
    weight: normal; 
    font-size: 18px; 
    color: #33b5e5; 
    z-index: 4; 
} 

.l3 .extralinks { 
    white-space: nowrap; 
    position: fixed; 
    top: 0px; 
    left:100%; 
    padding: 0 0 0 10px; 
    text-align:center; 
    height: 40px; 
    width: 300px; 
    z-index: 4; 
    display: inline-block; 
    -webkit-transition: all .2s ease 0s; 
    -moz-transition: all .2s ease 0s; 
    -o-transition: all .2s ease 0s; 
    -ms-transition: all .2s ease 0s; 
    transition: all .2s ease 0s; 
    z-index: 4; 
} 
.l3:hover .extralinks { 
    left: 50%;  
} 
.l3:hover .extralinks li { 
} 


.links li:nth-child(3) { 
    width:200px; 
    margin-right:0px; 
} 

.links li:nth-child(3):hover > a { 
    font-family: RobotoLight; 
    text-decoration: none; 
    text-transformation: none; 
    weight: normal; 
    font-size: 18px; 
    color: #33b5e5; 
    z-index: 4;     
    border-bottom: 3px solid #33b5e5; 
} 


.links li:hover > a, li:active > a { 
    border-bottom: 3px solid #33b5e5; 
}

HTML：

<div class="links"> 
    <menu> 
     <li> 
      <a href="#">Link 1</a> 
     </li> 
     <li> 
      <a href="#">Link 2</a> 
     </li> 
     <li class="l3"> 
      <a href="#">Link 3</a> 
      <menu class="extralinks"> 
       <li> 
        <a href="#">Link 4</a> 
       </li> 
       <li> 
        <a href="#">Link 5</a> 
       </li> 
      </menu> 
     </li> 
    </menu> 
</div>

來源

2013-04-18 08:37:44 Mysteryos

這就是我正在考慮的，但是我遇到了懸停時出現在第三個li底部的邊框的問題，而且在實際的導航欄上這會太wayyyyy太大。如果有某種方法可以切斷邊界，我會使用這種方法，但是我還沒有找到。 – shanling 2013-04-19 01:43:37

js滑動菜單幫助 - 動畫延遲在中間？

回答

相關問題