Jquery 我的导航有点搞笑：设置一个宽度'；它不工作，就会跳起来

我创建了一个JSFIDLE来显示。

发生的事情是，我希望列表项具有统一的长度，150px，但是当我设置它时，动画似乎从左到右切换，这是我不想要的。此外，在页面加载时，链接之间有一定的空白空间，但似乎跳转到不同的空白空间。我希望它们保持在原来的位置，只有宽度从统一的宽度改变。我做错了什么？我试图调整的一切都带来了负面的结果

我已经在下面发布了与此对应的所有代码

我的HTML如下所示：

<div id="leftcolumn">
    <ul id="navigation">
        <li><a href="#" id="nav1" class="nav">Main</a>

        </li>
        <li><a href="#" id="nav2" class="nav">Double Rainbow</a>

        </li>
        <li><a href="#" id="nav3" class="nav">Monochrome Rainbow</a>

        </li>
    </ul>
</div>

$(".nav").hover(function () {
    $(this).animate({
        width: "250px"
    });
}, function () {
    $(this).animate({
        width: "150px"
    });
});

我的JQuery是这样的：

<div id="leftcolumn">
    <ul id="navigation">
        <li><a href="#" id="nav1" class="nav">Main</a>

        </li>
        <li><a href="#" id="nav2" class="nav">Double Rainbow</a>

        </li>
        <li><a href="#" id="nav3" class="nav">Monochrome Rainbow</a>

        </li>
    </ul>
</div>

$(".nav").hover(function () {
    $(this).animate({
        width: "250px"
    });
}, function () {
    $(this).animate({
        width: "150px"
    });
});

将此添加到CSS中：

#leftcolumn a {float:right}

您会注意到，当您将鼠标悬停在每个项目上并再次返回时，动画将排队等待。如果你不想要这个

改变

$(this).animate

到

修复：

使用CSS修复程序：

---

使用CSS fix和jQuery fix:

在每个链接中，将文本包装在

元素中，如下所示：

<li><a href="#" id="nav1" class="nav"><span>Main</span></a></li>
<li><a href="#" id="nav2" class="nav"><span>Double Rainbow</span></a></li>
<li><a href="#" id="nav3" class="nav"><span>Monochrome Rainbow</span></a></li>

这里的关键属性是

display:inline块。默认情况下，定位标记是内联元素，因此将忽略标注特性。jQuery的
animate（）
函数必须更改其目标元素的
display
属性，才能产生正确的行为

编辑：将链接文本包装在具有块行为和设置宽度的内部
元素中会阻止文本在此场景中移动，因为正在设置动画的是外部
标记。
选中此处，您希望这样吗

CSS
float:right似乎不起作用，它仍然在错误的位置启动，宽度不会设置为150px。问题是，悬停动画工作正常，但因为链接默认为-display:inline。当你取消覆盖时，它们被设置为150px的宽度，而不是返回显示：内联（非固定宽度）啊，这太棒了。有没有办法让宽度从对面变长？更新了我的答案-我想这就是你想要的？实际上这正是我想要做的！
#leftcolumn {
    width: 300px;
    margin: 5px;
    font-family: Calibri;
}
#leftcolumn ul {
    list-style: none;
    padding: 10px 10px 10px 30px;
}
#leftcolumn li {
    margin-bottom: 25px;
}
#leftcolumn a {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 7px;
}
#leftcolumn a span {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    text-align: right;
    color: white;
}
#nav1 {
    background-color: #FF2300;
}
#nav2 {
    background-color: #FF9A00;
}
#nav3 {
    background-color: #FFE800;
}

#leftcolumn {
    float: left;
    width: 300px;
    margin: 5px;
    font-family: Calibri;
    background:#dfdfdf;
}
#leftcolumn ul {
    list-style: none;
    padding: 10px;
    width: 250px;
    float:right;
}
#leftcolumn a:link {
    text-decoration: none;
    color: white;
}
#leftcolumn a:visited {
    color: white;
}
#leftcolumn li {
    width: 150px;
    float:right;
    display: block;
    text-decoration: none;
    color: white;
    padding: 7px;
}
a#nav1,
a#nav2,
a#nav3{
    width: 150px;
    margin-bottom: 25px;
    float:right;
    text-decoration: none;
    color: white;
    padding: 7px;
    text-align:right;
}
#nav1 { background-color: #FF2300; }
#nav2 { background-color: #FF9A00; }
#nav3 { background-color: #FFE800; }