1

次のコードは、display および -webkit-transform 属性を除くすべての属性に対して機能します。

// Example 1 :

$(this).animate({
               "color":"#efbe5c",
               "display":"block"
},1000);


 // Example 2 :

$(this).animate({
              "-webkit-transform":"rotate(30deg)"
},1000);
4

6 に答える 6

3

animateのドキュメントから:

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値でないほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化できません(たとえば、幅、高さ、または左はアニメーション化できますが、jQuery.Color() プラグインを使用しない限り、背景色はアニメーション化できません)。

ただし、opacity指定された値にフェードします。

jQueryのanimateページの「基本的な使用法」の下に、単純な画像などの要素をアニメーション化するための例があります。

HTML

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

jQuery

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

次のようにtoggle値を設定することもできます。opacity

$( "p" ).animate({
  height: "toggle", opacity: "toggle"
}, "slow" );
于 2013-04-04T12:28:01.277 に答える
3

要素の表示タイプではなく、要素の opacity プロパティをアニメーション化する必要があります。

最初に css を に設定して非表示にしdisplay:block、opacity:0次に opacity プロパティを にアニメーション化しopacity:1ます。

$(this).css({"display":"block","opacity":0})animate({"opacity":"1"},1000);

また、外部の jQuery プラグインがないと色をアニメーション化できません。

于 2013-04-04T12:28:53.617 に答える
1

opacityと をアニメートする例を次に示し-webkit-transformます。

jQuery はすぐにアニメーション化する方法を知らないstepため、 のコールバックを使用していることに注意してください。-webkit-transformrotate(30deg)

var $test = $('#test');
$test.animate({
    opacity: 1
}, {
    step: function(now, fx) {
        $test.css('-webkit-transform', 'rotate(' + (30 * now) + 'deg)');
    }
}, 1000);

デモ: http://jsfiddle.net/CBWjh/

于 2013-04-04T13:23:22.150 に答える