1

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

我现在拥有的：

$('.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>

知道出了什么问题吗？

4

2 回答 2

5

color除非您使用 jQuery插件，否则您无法为颜色设置动画。( GitHub )

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

来源

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

于 2012-05-12T20:41:35.497 回答
0

CSS3解决方案

这是我的 0.2 美元。
使用 CSS3 和一点 jQuery？

演示 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 解决方案

如果您想要一个跨浏览器解决方案 - 我们可以做一个很好的技巧：
我们可以使用复制该元素.clone()，
获取它的位置，
淡出原始元素并淡入克隆。:)

干得好：

jsBin 演示2

$('.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!
  
});
于 2012-05-12T21:17:06.050 回答