Jquery li标记内的跨度标记的动画

我想为悬停在上面的链接创建一个新效果。我已经把想法准备好了，但还不能完成动画。这是一张草图：

• 红色边框显示整个项目，该项目可能具有 要成为列表项
• 黄色边框表示两个分开的项目。右边 当左侧黄色位移动时，黄色位将保持静止 在左边
• 打开时，白色边框中应显示“show”字样 它（在开始时隐藏）

这就是它最终应该看到的样子：

下面是一个精巧的例子，它用div再现了我的意思：

我就是不能让它与常规文本一起工作（在ul标签和li标签内）。 基本上应该是这样的：

<li>
    <span>.about(</span>
    <span class="hidden">show</span>
    <span>)</span>
</li>

CSS：

<div class="container">
    <div class="wrapper">
        <div class="box-left">.about(</div>
        <div class="box-middle">show</div>
        <div class="box-right">)</div>
    </div>
    <div class="text">
    Hover over the red
    </div>
</div>

var middle = $('.box-middle');
middle.css("width", "0");

$('.wrapper')
    .mouseenter(function () {
    $(middle).animate({
        width: '60px'
    });
})
    .mouseleave(function () {
    $(middle).animate({
        width: '0'
    });
});

.wrapper > div {
    float:left;
    height: 35px;
    color:white;
    border: 1px solid black;
    margin-right:1px;
    font-size:24px
}

.box-left {
    width:80px;
}

.box-right {
    width: 20px;
}

.box-left, .box-right {
    background-color:red;
}

.box-middle {
    background-color:green;
    overflow:hidden;
}

.container{
    width:100%;
    background-color:pink;
}

.text{
 clear:left;   
}

给你：

要防止右支架移动，您需要移动左侧而不是中间。查看上面的示例以更好地理解它

说到CSS，只需将

ul

、

li

、

span

更改为具有与

div

相同的默认CSS属性

如果我们将

.container

a

ul

而不是

div

，我们不需要更改任何内容

如果我们制造

.wrapper

a

ul

，我们必须这样做：

.wrapper {
    list-style:none;
    display:inline-block;
}

如果我们将

框设为左

、

框中

和

框右

跨度，我们需要这样做（并删除空格）

作为额外的奖励，这里有一个示例，其中包含多个

li

元素，每个

li

元素中的间隔基于

.box middle

：

编辑

我决定做它最擅长的事（搞砸了）。需要将此添加到CSS中，以使其在IE中工作

.box-left {
    white-space:nowrap;
}

---

看起来有点古怪，但我希望这就是你想要的

演示-

html

<div class="container">
    <div class="wrapper">
         <div class="box-right">)</div>
         <div class="box-middle">show</div>
        <div class="box-left">.about(</div>

    </div>
    <div class="text">
    Hover over the red
    </div>
</div>

---

下面的解决方案将自动处理以下HTML，因此您不需要添加额外的元素

<ul>
  <li>.about(show)
  <li>.projects(show)
  <li>.contact(show)
</ul>

.关于（表演）
.项目（展览）
.联络（展览）

Up投票支持这一努力，但无法找到问题所在。尽管html标记看起来非常干净，但当它在html标记中分为3个跨距时，将css应用于单词“show”和其他单词会更容易。这就是方法！棘手的一点是显示：内联块对我来说。它一直把事情搞得一团糟，但看起来你已经解决了！很高兴你喜欢我的解决方案。我确实注意到IE有一个讨厌的小虫子，不过我把它修好了。查看我的编辑。

.wrapper {width: 180px; float: left;}

.wrapper > div {

    height: 35px;
    color:white;
    border: 1px solid black;
    margin-right:1px;
    font-size:24px;

}
.box-left {
    width:80px;
    float: right;
}
.box-right {
    width: 20px;
    float: right;
}
.box-left, .box-right {
    background-color:red;
}
.box-middle {
    background-color:green;
    overflow:hidden;
    float: right;
}
.container{
    width:100%;
    background-color:pink;
}

.text{
 clear:left;   
}

<ul>
  <li>.about(show)
  <li>.projects(show)
  <li>.contact(show)
</ul>