Question

EDITED

我一直在寻找解决方案，试图去做，但我不能这样做......是否有可能做到这一点？

   <button>Button</button>
    <div id='myDivId'>
        <div class="progress"></div>
        <div class="content">
            DIV
        </div>
    </div>

$("button").click(function(){ 
      $('.progress').animate({ width: '100%' }, 10000);
});

#myDivId{background:red; color:white; padding:10px; overflow:hidden; position:relative;}
.content{
    z-index:9;
    position:relative;
}
.progress{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:blue;
    left:0px;
    top:0px;
}

Demo

但不是使用背景颜色，而是改变文本的颜色......

Answer 1

根据原始问题中的http://github.hubspot.com/pace/docs/welcome/设置逐渐更改颜色的文字动画...

我们的想法是将字符叠加在一起，并显示不同颜色的顶层。

某些CSS

.container { position: relative; }
.layer1 { position: absolute; top: 0; left: 0; }
.layer2 { position: absolute; top: 0; left: 0; }
.char { color: #000; font-size: 30px; position: absolute; top: 0; }
.layer2 .char { color: #F00; overflow: hidden; width: 0; }
.char.l { left: 0; }
.char.o { left: 10%; }
.char.a { left: 20%; }

某些HTML

<div class="container">
  <div class="layer1">
    <span class="char l">L</span>
    <span class="char o">O</span>
    <span class="char a">A</span>
    ...
  </div>
  <div class="layer2">
    <span class="char l">L</span>
    <span class="char o">O</span>
    <span class="char a">A</span>
    ...
  </div>
</div>

一些观察

$('.layer2 .char').animate({'width':'40px'}, 2000);

JSFiddle演示

您可以在行动here中看到这一点。此示例仅使用animate来显示图层，但您可以使用加载逻辑替换该脚本，并相应地调整每个顶层字符的宽度。

另请注意，PACE github项目使用CSS过渡来制作动画，允许它们只是设置角色的宽度，但无论如何这应该让你开始。

UPDATED JSFiddle

此new fiddle包括使用媒体查询调整中心对齐和响应宽度/字体大小。

使用JQuery动画颜色文本

1 个答案: