为何$(this).animate不生效？jQuery动画及fade方法问题咨询

嘿，我来帮你搞定这个问题！你遇到的几个小问题我都梳理清楚了，咱们一步步解决：

你代码里的background = "red"写法不对哦！在jQuery animate的参数对象里，属性和值之间要用冒号，不是等号。而且CSS属性名推荐用驼峰式写法，所以应该改成backgroundColor: "red"。

这才是动画没生效的关键！原生的jQuery .animate() 方法本身不支持颜色类属性的渐变（比如背景色、文字颜色），只能处理数值类的属性（比如width、opacity这些）。那怎么解决呢？给你两个实用方案：

方案一：引入jQuery UI扩展动画能力 #

jQuery UI对原生animate做了扩展，支持颜色动画。你只需要在引入jQuery之后，再引入jQuery UI的脚本，然后修正后的代码就能正常运行了。这里还给你加上了鼠标移出时的还原动画，体验更完整：

$(document).ready(function() {
  $(".boton1").hover(
    function() {
      $(this).animate({ backgroundColor: "red" }, 500);
    },
    function() {
      $(this).animate({ backgroundColor: "" }, 500);
    }
  );
});

方案二：用CSS过渡实现（更推荐，无需额外依赖） #

既然你在用Bootstrap 4，其实用CSS的transition属性来实现这个效果会更简单高效，完全不需要jQuery动画。代码超简洁：

先写CSS样式：

.boton1 {
  transition: background-color 0.5s ease; /* 0.5秒对应你要的500毫秒过渡时长 */
}
.boton1:hover {
  background-color: red;
}

这样直接通过CSS就能实现hover时背景渐变为红色的效果，性能更好，代码也更易维护。

另外你提到fadeIn、fadeOut不能在.animate()里使用，这是因为它们是独立的jQuery方法，不能作为animate的属性参数——animate只能接受CSS属性的键值对，而alert()是普通的JavaScript函数，所以能正常执行哦。

内容的提问来源于stack exchange，提问作者SrEdgar