0

jquery

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").animate({backgroundColor: '#00f', width: '50%', marginLeft: '50px'});
  });
});
</script>

html

<h2>This is a heading</h2>
<p style="background: #ff0">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>

私はjqueryを学んでおり、cssを使用してテストでこれが好きであることがわかりましmargin-leftたmarginLeftが、marginLeft機能しbackgroundColorませんでした。私はここにいますか、それとも何か間違っていますか?

4

4 に答える 4

3

jquery UI背景色をアニメーション化するには、またはとしてサポートするプラグインを含める必要がありますjquery color。

http://jsfiddle.net/GW5hB/

于 2013-06-11T09:39:26.777 に答える
0

この回答に基づいて、jQueryUI を使用せずに色をアニメーション化するための可能な回避策:

function toRGB(hexStr) {
    var s = hexStr.substring(1);
    if (s.length==3) {
        s = s.charAt(0) + s.charAt(0) + s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2);
    }
    var i = parseInt(s, 16);
    var rcolor = (i & 0xff0000) >> 16;
    var gcolor = (i & 0x00ff00) >> 8;
    var bcolor = i & 0x0000ff;
    return { r:rcolor, g:gcolor, b:bcolor };
}

$('button').click(function(){
    var elem = $('div');
    var c1 = toRGB('#ffffff'), c2 = toRGB('#0000ff');
    $(c1).animate(c2, {
        duration:2000,
        step: function(){
            elem.css('backgroundColor', 'rgb('+parseInt(this.r)+','+parseInt(this.g)+','+parseInt(this.b)+')');
        }
    });

});

jsfiddle

于 2013-06-11T12:01:44.793 に答える
0

あなたが含まれていないようですjqueryUi.js

これを含める必要があります（含めた後jquery.js）

<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>

jQuery UI には、カラー アニメーションと、色を操作するための多くのユーティリティ関数を提供する jQuery Color プラグインがバンドルされています。

于 2013-06-11T09:40:17.437 に答える
0

背景色のアニメーションを有効にするプラグインが必要です

ドキュメントから：

(たとえば、jQuery.Color() プラグインを使用しない限り、幅、高さ、または左はアニメーション化できますが、背景色はアニメーション化できません)。

于 2013-06-11T09:42:10.030 に答える