jquery使用“位置”在菜单上设置填充动画；固定的；

我正在使用jquery代码来设置菜单的动画。 我的菜单是垂直的。 当鼠标移到li上时，将添加20像素的填充，当鼠标移到li上时，填充将设置为其原始值。 它很好用

但我有一个问题，当我将菜单设置为“修复”位置时，我的动画中出现了一个错误，当鼠标移过我（例如使用“infos pratiques”）时，我的菜单会颤抖。 问题是只有当我的菜单设置为固定和绝对时

有人能帮我吗

下面是一个JSFIDLE链接，用于查看它的运行情况：

这是我的html：

<div id="menu_left">
    <nav id="menu_1">
          <ul>
            <li><a href="#">• Le lieu</a></li>
            <li><a href="#">• Le Projet</a></li>
            <li><a href="#">• Evenements</a></li>
            <li><a href="#">• Residents</a></li>
            <li><a href="#">• Ateliers</a></li>
            <li><a href="#">• Infos Pratiques</a></li>
        </ul>

    </nav>

    <nav id="menu_2">
          <ul>
            <li><a href="#">• Bar | Restaurant</a></li>
            <li><a href="#">• Privatiser le Lieu</a></li>
            <li><a href="#">• Soutenir le Projet</a></li>
            <li><a href="#">• Covoiturage</a></li>
        </ul>

    </nav>
    </div>

还有我的JS：

function MIn()
{
    jQuery(this).animate({paddingLeft:"20px"},"fast");
}
function MOut()
{
    jQuery(this).animate({paddingLeft:"10px"},"fast");
}   

$('li a').hover(MIn, MOut);

---

非常感谢您的帮助，

只需为

菜单\u left div设置最小宽度

#menu_left div
{
min-width: 300px;
}

---

这是因为

标签中有很长的文本。当您为主

菜单设置
位置：fixed
左div

时，会发生这种情况。您可以给

ul

一个

右填充
您想要的内容，我将其设置为
0%
以保持宽度不变。

#menu_left div
{
min-width: 300px;
}

然后给
#菜单1 li a
a
空白：pre
，使其在边缘上展开

.我把所有的代码都放在底部，这样你就可以很容易地找到它

更好的是，如果你想增加额外的填充，你可以为
#menu_1
添加一个
最大宽度。这里有一个小提琴：
只需在你的菜单中添加宽度：250px

#menu_left {
    opacity: 0.5;
    font-family: 't-star_mono_roundregular';
    color: #FFF;
    text-decoration: none;
    position: fixed;
    top:0;
    left:0;
    background-color:red;
    **width:250px;**
}

而您编辑的小提琴：
#menu#u 1
的边距上限为10%。当设置为百分比时，边距基于包含元素的宽度。因此，当将20px添加到li的宽度时，它会更改#menu#1的宽度，然后更改填充的大小。如果将其更改为以下值，它将作为i内容：

#menu_1 {
    margin-top: 22px;
}

你可以用固定的宽度将其修改为，但这意味着如果你得到一个较长的菜单名，你将不得不再次更改。我已经更新了fiddle以进行一些更改。你不需要javascript，如果你将转换置于默认状态[即不是：悬停位]然后，在悬停后，转换将转换回其原始状态

如何抖动？就像粉红色背景中的移动一样？你能详细说明一下你所说的“抖动”是什么意思吗？小提琴看起来很好？它只在最长的项目上出现。所以，你想在
#菜单左
@NickR，是的，它只在最长的项目上出现。有没有办法不在#菜单上增加宽度_left@vimes1984谢谢您的回复，请尝试将“infos pratiques”项目悬停在正确的小提琴上？悬停在：
infos pratiques
；-）