0

我创建了一个 JSFiddle 来展示。 http://jsfiddle.net/nv78t/

发生的事情是我希望列表项具有统一的长度，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>

我的 CSS 是这样的，

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

我的jQuery是这样的：

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

3 回答 3

1

在每个链接中，将文本包装在一个<span>元素中，如下所示：

<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>

并使用以下 CSS 声明（我已将其剥离以专注于问题）：

#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;
}

这里的关键属性是display: inline-block;. 默认情况下，锚标记是内联元素，因此将忽略维度属性。jQuery 的animate()函数必须更改display其目标元素的属性才能产生正确的行为。

<span>编辑：将链接文本包装在具有块行为和设置宽度的内部元素中将阻止文本在这种情况下移动，因为它<a>是正在动画的外部标签。

于 2013-06-11T00:11:09.573 回答
1

检查这里，http://jsfiddle.net/yeyene/nv78t/5/，你想要这样吗？

CSS

#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; }
于 2013-06-11T06:38:34.643 回答
0

将此添加到您的 CSS 中：

#leftcolumn a {float:right}

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

改变

$(this).animate

到

$(this).stop().animate

修复：

使用 CSS 修复：http: //jsfiddle.net/nv78t/2/

使用 CSS 修复和 jQuery 修复：http: //jsfiddle.net/nv78t/3/

于 2013-06-10T23:34:10.093 回答