一个li标签内的span标签动画

Question

我想为链接创建一个新的悬停效果。我已经有了想法，但无法完成动画。这是一个草图：

• 红色 边框显示整个项目，可能需要是列表项。
• 黄色 边框表示两个分离的项目。右侧的黄色部分将保持不动，而左侧的黄色部分向左移动。
• 打开时，白色 边框应该有单词“show”（在开始时隐藏）。

最终效果应该如下所示：

这里有一个 jsfiddle 示例，演示了使用 div 元素的情况: http://jsfiddle.net/t5pcjtdo/

但我无法让它在常规文本中（在 ul 标签和 li 标签内）工作。 基本上，它需要像这样：

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

并且，我该如何确保右括号保持不动，而其余部分向左移动？

HTML：

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

jQuery：

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

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

CSS：

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

- Jordec

---

点赞鼓励，但无法确定问题出在哪里。 - Alex Char

Answer 1

请看这里：http://jsfiddle.net/t5pcjtdo/8/

在防止右括号移动方面，您需要移动左侧，而不是中间。请查看上面的示例以更好地理解。

在CSS方面，只需将ul、li和span更改为具有div的相同默认CSS属性即可。

如果我们将.container设置为ul而不是div，则无需更改任何内容。

如果我们将.wrapper设置为ul，则需要执行以下操作：

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

如果我们创建了box-left、box-middle和box-right这些span元素，我们需要这样做（并删除空格）。

.box-left, .box-middle, .box-right {
    vertical-align:top;
    line-height:30px;
}

作为额外的奖励，这里有一个具有多个 li 元素并且基于每个 li 中的 .box-middle 进行间距的示例：http://jsfiddle.net/t5pcjtdo/10/ 编辑 IE决定做它最擅长的事情（搞砸）。需要在CSS中添加这个来使其在IE中工作。

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

- Scott Rowell

---

这就是正确的方法！对我来说，棘手的部分是display:inline-block。它一直搞砸了一切，但看起来你已经解决了！ - Jordec

很高兴你喜欢我的解决方案。不过我注意到在IE浏览器上有一个讨厌的小错误，我已经修复了它。请查看我的编辑。 - Scott Rowell

Answer 2

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

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

它还会自动排列项目，所以它们不会重叠在一起，你无需硬编码宽度。

Snippet:

$('li').each(function() {
  var w1= $(this).width();
  $(this).html($(this).html().replace(/\((.+)\)/,'(<span>$1</span>)'));
  var w2= $(this).width();
  $(this).css({
    marginRight: (w1-w2)+5
  });
});

$('li').mouseenter(function() {
  var sp= $(this).find('span');
  sp.css({width:'auto'});
  var width= sp[0].clientWidth;
  sp.css({
    width: 0
  });
  sp.animate({
    width: width
  });
  $(this).animate({
    marginLeft: -width
  });
}).mouseleave(function() {
  var sp= $(this).find('span');
  sp.animate({
    width: 0
  });
  $(this).animate({
    marginLeft: 0
  });
});

li {
  color: white;
  font-weight: bold;
  font: 18px verdana;
  display: inline-block;
  background: red;
}

li span {
  width: 1px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  background: green;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>.about(show)
  <li>.projects(show)
  <li>.contact(show)
</ul>

- Rick Hitchcock

---

尽管HTML标记看起来非常干净，但在HTML标记中将其分成3个span后，将更容易地将CSS应用于单词“show”和其余部分。 - Jordec

Answer 3

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

演示 - http://jsfiddle.net/t5pcjtdo/9/

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>

CSS

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

- you-rick