CSS3解决方案

Question

我有一个班级：cash_warn。我想用jquery动画改变span的颜色，但它不起作用。

我现在拥有的：

$('.cash_warn').animate({ color: "#ff8484" }, 500);

另一方面，这确实可以正常工作，但它没有动画：

$('.cash_warn').css('color',"#ff8484");

HTML：

<div class=" friends-shadow detailreward3 detailreward"  style="position:absolute;
 height:71px;  width:238px; left: 453px; top: 40px; padding:20px; z-index:99; font:
 bold 11px Helvetica, Arial, sans-serif;">

<span style=" color:#fff" class="cash_warn">
text
</span>

<br /> <br />

 more text
</div>

知道出了什么问题吗？

Answer 1

除非使用jQuery color插件，否则无法设置颜色动画。（GitHub）

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。除非另有说明，否则属性值将被视为多个像素。

Source

注意：jQuery UI项目通过允许对颜色等非数字样式进行动画处理来扩展.animate（）方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

Answer 2

CSS3解决方案

这是我的0.2 $。
使用CSS3和一些jQuery？

demo jsBin

HTML：

<span class="cash_warn"> <!-- removed inline style-->
    text
</span>

CSS：

span.cash_warn{
    color: transparent;              /*set to transparent*/
    text-shadow: 0 0 0 #fff;         /*we concentrate the text shadow*/
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
span.go_animate{                    /*this will be added by JS*/
    text-shadow: 0px 0px 0px #f00;
}

最后：

var textInt = setTimeout (function(){
  $('span.cash_warn').addClass('go_animate');
},1000); // after one second ... add the 'go_animate' class

XBrowser解决方案

如果你想要一个crossbrowser解决方案 - 我们可以做一个很好的伎俩：
我们可以使用.clone()，
来复制该元素得到它的位置，
淡出原始的并淡入克隆。：）

你去：

jsBin demo2

$('.cash_warn').each(function(){

  var spanPos = $(this).position();
  $(this)
    .fadeTo(1500,0)              // fadeOut original
    .clone()                     // clone it
    .appendTo($(this).parent())  // append to parent element
    .addClass('spanClone')       // add a class if you need it for (CSS).
    .hide()                      // hide the clone
    .css({position:'absolute', left:spanPos.left, top: spanPos.top, color: 'red'}) // you don't need 'color' and 'position' if you have defined that already in the CSS for .spanClone
    .fadeTo(1500,1);             // after positions are set... fade it in!

});

jquery animate：改变span颜色不起作用

2 个答案:

CSS3解决方案

demo jsBin

XBrowser解决方案

jsBin demo2