jquery animate 改变border颜色不生效

Question

$(".dh_cont").eq(2).animate({
    "height":"170px",
    "border-color":"red"
},1000);

animate不能改变border的颜色吗?为嘛高度可以改变，border颜色不能改变呢？？

Answer 1

• jQuery.UI 中支持颜色的动画 https://jqueryui.com/animate/

  $( "#effect" ).animate({
            backgroundColor: "#aa0000",
            color: "#fff",
            width: 500
          }, 1000 );

  
  缺点：只是为了实现这一个功能，却要附带的载入jquery.ui那么大一个库
  

• Animating colors https://bitstorm.org/jquery/color-animation/

  $('#demodiv').animate({borderBottomColor: '#00346B'})

Answer 2

因为animate方法的实现原理是用定时器根据步长来逐渐改变属性值，因此只支持数值型的属性改变，颜色不具有十进制的增减性，所以实现不了。要渐变的话有一些插件可以实现的。

Answer 3

jquery的animate没有提供颜色相关的动画，你可以试试用css3的transition。