jquery - li 标签内的 span 标签的动画

Question

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

• 红色 边框显示了整个元素，其中可能有成为列表项。
• 黄色 边框表示两个分开的元素。 权利当左边的黄色位移动时，黄色位将保持静止向左。
• 打开时，白色 边框应该有“show”字样它(隐藏在开始处)。

这就是它最终需要的样子:

这是一个繁琐的东西，它重现了我对 div 的意思:<强> http://jsfiddle.net/t5pcjtdo/

我只是无法让它与常规文本一起使用(在 ul-tag 和 li-tag 内)。基本上它需要是这样的:

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

Answer 1

给你:http://jsfiddle.net/t5pcjtdo/8/

在防止右括号移动时，您希望移动左侧而不是中间。查看上面的示例以更好地理解它。

当涉及到 CSS 时，只需更改 ul、li、span 使其具有与 a 相同的默认 CSS 属性div.

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

如果我们将 .wrapper 设为 ul，我们必须这样做:

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

如果我们制作 box-left、box-middle 和 box-right 跨度，我们需要这样做(并删除白色节奏)。

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