动画背景颜色（显示块）

Question

我正试图在网站www.momkai.com上实现效果 当我悬停一个项目（一个li设置为显示为块）时，我希望背景颜色从左到右动画。任何想法如何实现呢？理想情况下没有图像。

Answer 1

他们这样做是通过显示第一张图片（白色 - 黑色文字）然后在鼠标悬停动画剪辑（http://www.w3schools.com/css/pr_pos_clip.asp）风格的第二张图片（黑色） - 白色文本）位于第一个文本之上。

Answer 2

您可以尝试使用CSS3过渡。他们得到了很好的支持：http://caniuse.com/#search=transition

一个例子： http://jsfiddle.net/VirusZ/6VnTm/

Answer 3

最简单的方法是使用背景图像并使用类似jQuery的方法为背景位置设置动画，但对于无图像选项，请使用以下内容：

<div>
  <span>link text</span>
  <div class="bgcolor"></div>
</div>

div {
  position: relative;
  background: #F00;
  width: 200px;
}

div div.bgcolor {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 0px;
  background: #FF0;
}

和文档加载

li.hover(function() {
  $(this).children(".bgcolor").animate({width:"200px"});
}, function() {
  $(this).children(".bgcolor").animate({width:"0px"});
});