Question

我想为悬停在其上的链接创建一个新效果。我已经准备好了这个想法，但无法完成动画制作。这是一幅草图：

enter image description here

红色边框显示整个项目，可能会有成为一个清单项目。
黄色边框表示两个分隔的项目。 权利当黄色位移动时，黄色位将保持静止 在左边。
打开时，白色边框应包含“show”字样它（在开始时隐藏）。

这就是它最终需要看的方式：

enter image description here

这是一个繁琐的再现我对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更改为div具有相同的默认CSS属性。

如果我们.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元素的示例，并且每个.box-middle中基于li的间距：http://jsfiddle.net/t5pcjtdo/10/

修改

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

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

Answer 2

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

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

它还会自动分隔项目，因此它们不会互相覆盖，并且您不需要对宽度进行硬编码。

<强>段：

＆＃13;

$('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
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

在li标签内的span标签的动画

3 个答案: