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

colorjQueryプラグインを使用しないと色をアニメーション化できません。( 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 に答える