Не может анимировать цвет границы с 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); 

Но это Безразлично Не работай! Ничего не происходит вообще, даже ошибки не показаны ...

Я также попытался это:

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

Но с такими же результатами ... Как вы это делаете?

Answer 1

Из jQuery animate reference (курсив мой)

Все анимированные свойства должны быть анимированы одним числовым значением, за исключением случаев, указанных ниже; Большинство свойств, которые не являются числовыми, не могут быть анимированными, используя базовую функциональность jQuery (например, ширина, высота или левая сторона может быть анимирована, но фонового цвета не может быть, , если не используется плагин jQuery.Color() , Значения свойств обрабатываются как количество пикселей, если не указано иное. Единицы измерения em и% могут быть указаны там, где это применимо.

Короче говоря, похоже, что вам нужен плагин Color(), или вам нужно катить самостоятельно.

Ответ Эндрю на 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

Вот another answer относительно этого tecnhique.