如何在菜單上使用jQuery創建滑動動畫？

我在很多網站上看到過這個，但我不確定我能否解釋它。如何在菜單上使用jQuery創建滑動動畫？

有時有滑動導航元素，就像是滑動菜單項下箭頭當用戶將鼠標懸停在不同的菜單鏈接等

這裏有一個簡單的菜單：

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link number 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link something 4</a></li> 
    <li><a href="#">Link 5</a></li> 
</ul>

而且有些的jQuery（我知道我會能夠得到與簡單的CSS一樣的效果：懸停）：

jQuery('ul li a').hover(function() { 
    jQuery('a').removeClass('active'); 
    jQuery(this).addClass('active'); 
});

此外，工作的jsfiddle：

http://jsfiddle.net/8EvhK/

按鈕背景在懸停時變爲紅色。當我懸停時，我希望這個背景可以在這些按鈕之間滑動和變換（寬度）。

如何做這樣的事情？我一直在尋找教程，但沒有運氣。

非常感謝！

來源

2012-06-17 user1461645

順便說一下，大部分時間你可以使用'''而不是'jQuery'。即。 '（「a」）。removeClass（「active」）;' – ACarter

順便說一句，像你的例子一樣的懸停效果應該總是用CSS來完成，但不能用Javascript來完成。 – danijar

使用jquery的append添加元素到菜單。

$('ul').append('<div id="slider"></div>');

在任意菜單項的hover，animate到水平position和觸發事件的菜單項的width這個新元素。

$('ul li a').hover(function(){ 

    var left = $(this).parent().position().left; 
    var width = $(this).width(); 

    $('#slider').stop().animate({ 
     'left' : left, 
     'width' : width 
    }); 
});

將滑塊重置爲初始狀態。

添加一些CSS。

#slider { 
    position:absolute; 
    top: -5px; 
    left: 0; 
    height: 100%; 
    width: 0; 
    padding: 5px 15px; 
    background-color: #f00; 
    z-index:-1; 
}

這裏是工作提琴：http://jsfiddle.net/5wPQa/2/

來源

2012-06-17 10:03:08 danijar

修復： http://jsfiddle.net/5wPQa/1/ 由於邊框的寬度爲1px，因此您需要向左邊添加1px – Puyol

@Pyyol：斑點！我編輯我的答案與另一個版本通過CSS修復它。 – danijar

謝謝你們！ :) – user1461645

-1

您可以CSS transitions達到這樣的效果：

ul li { 
    display:block; 
    padding: 5px 15px; 
    background-color: #333; 
    color: #fff; 
    text-decoration: none; 
    width:50%; 
    -moz-transition: width 1s; /* Firefox 4 */ 
    -webkit-transition: width 1s; /* Safari and Chrome */ 
    -o-transition: width 1s; /* Opera */ 
} 

ul li:hover{ 
    width:100%; 
}

Here is an example。

來源

2012-06-17 10:11:56 MaJac89

如何在菜單上使用jQuery創建滑動動畫？

回答

相關問題