图标悬停时滑入文本

Question

我一直试图在以下地方获得效果：

1. 显示图标字体，旁边的文字被隐藏。
2. 悬停在图标上时，滑动隐藏的文字。从右侧滑入。

这是我到目前为止所尝试的内容：

（因为需要花费很多时间，用一些随机键盘符号替换图标） http://jsfiddle.net/h9EX9/

ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; }
ul li span { display: inline-block; }
ul li a { display: inline-block; width: 0; height: 0; overflow: hidden;  }
ul li:hover a  { transition: all 1s ease-out; width: 100%; height: auto; }



这是我想要完成的效果。注释的文本和宽度从右侧滑动。但除此之外还有其他图标。我希望它也可以在背景宽度扩大时滑动它们。

这是可能的，如果是这样的话？

Answer 1

这是你的演示，在CSS上做了一些工作。它有点啰嗦，但是在没有JavaScript的情况下完成工作，只使用动画的CSS过渡。出于某种原因，使用max-width代替width可以更好地制作动画，但我不确定原因。

演示： http://jsfiddle.net/Marcel/h9EX9/1/

正确实施后，您可能需要使用额外的包装元素来设置动画而不是<a>，因为例如，“标签”按钮中有多个<a>元素。

Answer 2

你可以通过使用jQuery hover（）函数来实现这个，这里有一些演示代码：

<script type="text/javascript">
$(".icon").hover(function(){ $(".text").show("slide", { direction: "left" }, 1000);}, function(){ $(".text").show("slide", { direction: "right" }, 1000);});
</script>

当然你必须如你所提到的那样将.text的显示设置为none，并且不要忘记将jQuery脚本包含在HTML的head部分中

ps：您可以用任何其他CSS选择器替换.icon和.text来选择您的图标或文字示例ul li a so $（“。icon”）。hover将变为$（“ ul li a“）。hover

Answer 3

我认为这就是你要照顾的： HTML：

<div id="holder">
    <div id="comment-button">♥
        <div id="comment-button-text">Comment</div>
    </div>

</div>

JS：

$('#comment-button').hover(
  function () {
      $(this).animate({
  width: '70px',
},1000)
      $('#comment-button-text').animate({
  width: '70px',
},1000)
  },
  function () {
         $(this).animate({
  width: '11px',
},1000)
          $('#comment-button-text').animate({
  width: '0px',
},1000)

  }
);

还有一些造型：

#comment-button{
background-color: #ababab;
width: 11px;
border-radius: 15px;
height: 15px;
padding: 10px;
color: red;
}
#comment-button-text{
   width: 0px;
display: block;
overflow: hidden;
position: absolute;
top: 16px;
left: 31px;
color: #8a8a8a;
}

这是工作小提琴：http://jsfiddle.net/xs4Nt/1/

Answer 4

我知道这是一篇旧文章，但这可能会对新来者有所帮助...

这是对@SeekingKnowledge's帖子（已链接）的修复和改进。下面是我的代码版本，解释了。

$("#closeText").hide(); $("#close").hover(function(){ $("#closeText").show("slide", { direction: "left" }, 400);}, function(){ $("#closeText").hide("slide", { direction: "left" }, 400);});

用图标元素的ID替换#close，并用包含文本ID的元素更改所有三个#closeText。您可以通过将当前值更改为400（以毫秒为单位）来自定义动画时间，但是，这对于我的网站来说是一个不错的速度。您还需要将#close CSS的z-index设置为比{{11}}的z-index大2。
请记住要获取jQuery！

Here's如何在网站上的其中一个页面上使用它（链接到CodePen）。

希望这对在这里寻找答案的人有所帮助！
Luka S