は、私は、このテーブルを持っているjQueryの

Question

との境界線の色をアニメーション化することはできません：

<table id="social" border="5"> 
    <tr> 
     <td> 
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot.com%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=177127339057410" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> 
     </td> 

     <td> 
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yannbane.blogspot.com/" data-via="Yannbane">Tweet</a> 
     </td> 

     <td> 
      <g:plusone></g:plusone> 
     </td> 
    </tr> 
</table> 

そして、私はこのように、jQueryを使ってその境界をアニメーション化したいと思います：

$("#social").animate({"borderTopColor": "#f00", "borderBottomColor": "#fff"}, 800); 

しかし、それはdoesnの仕事はありません！何も

私もこれを試してみた...でも、エラーが示されていない、まったく起こりません：

$("#social").animate({"border-top-tolor": "#f00", "border-bottom-color": "#fff"}, 800); 

しかし、同じ結果と

...あなたがこれを行うにはどうすればよいですか？ jQuery animate referenceから

Answer 1

（私の強調）

すべてのアニメーション化されたプロパティは、以下に示すよう除き、単一の数値、 にアニメーションする必要があります。 ほとんどのプロパティは数値ではありません。は、jQuery.Color（）プラグインが使用されていない限り、幅、 の高さ、または左にアニメーションできますが、背景色は ではありません） 。特に指定しない限り、プロパティ値はピクセル数として として扱われます。該当する場合は、単位emと％ を指定できます。

つまり、Color()プラグインが必要な場合や、自分でロールする必要があるようです。

Andrewの答えはthis questionで、ごくわずかな作業に必要な作業を行っているようです。

Answer 2

Colorプラグインは、すでに指摘されているものと間違いなく使用してください。

ただし、アニメーション変数（この場合はcolor変数）からなる興味深い手法を代わりに使用し、次にstep関数であなたの処理を行うことができます。

これは少し行き過ぎであってもよいが、カスタムアニメーションを行うためにあなたの柔軟性の多くを与える可能性があります。ここ

// animate color variable from 0x0 to 0xF 
$({ color: 0 }).animate({ color: 15}, { 
    duration: 800, 
    step: function(now, fx) { 
     var hexValue = Math.round(now).toString(16); 
     $("#social").css({ 
      'border-top-color': '#' + hexValue + '00', 
      'border-bottom-color': '#' + hexValue + hexValue + hexValue 
     }); 
    } 
}); 

jsfiddle demo

このtecnhiqueに関するanother answerです。