位置为 "fixed"的菜单上的 jquery 动画填充

Question

我正在使用 jquery 代码为我的菜单设置动画。 我的菜单使用竖排。 当 mouseover li 时，添加 20 px 的填充，当 mouseout 时，填充设置为其原始值。 它工作正常。

但是我有一个问题，当我将我的菜单设置为“固定”位置时，我的动画中有一个错误，当鼠标悬停在 l)i 上(例如使用“infos pratiques”时，我的菜单会颤抖。 只有当我的菜单设置为固定和绝对时才会出现问题。

有人可以帮我吗？

这里有一个 jsfiddle 链接，可以看到它的实际效果:

http://jsfiddle.net/F5643/2/

这是我的 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>

我的 CSS:

#menu_left {
    opacity: 0.5;
    font-family: 't-star_mono_roundregular';
    color: #FFF;
    text-decoration: none;
    position: fixed;
    background-color:red;
}

#menu_1{margin-top: 10%}

#menu_1 li {margin-bottom: 5px;display:block}
#menu_1 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:20px;
}

#menu_1 li a:hover{
  background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

#menu_2{margin-top: 40px}
#menu_2 li {margin-bottom: 5px;display:block}
#menu_2 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:15px;
}
#menu_2 li a:hover{background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

和我的 JS:

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

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

非常感谢您的帮助，

Answer 1

只需为 menu_left div 设置最小宽度

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

这是因为 <a> 中的冗长文本标签。当你设置 postion:fixed 时它会发生对于主要 menu_left div