Javascript 如何在css属性更改jquery中使用fadeIn

HTML:

<input id ="input"/>
<div id="box"></div>

#box{
   width: 100px;
   height: 100px; 
}

$('#input').on('focus',function(){
    $("#box").css('background', 'linear-gradient(red, transparent)')
})

JS:

<input id ="input"/>
<div id="box"></div>

#box{
   width: 100px;
   height: 100px; 
}

$('#input').on('focus',function(){
    $("#box").css('background', 'linear-gradient(red, transparent)')
})

但是我希望它淡入，所以我尝试了以下方法：

$("#box").css('background', 'linear-gradient(red, transparent)').fadeIn(1500);

还有这个

$('#input').on('focus',function(){
  $("#box").fadeIn(1500, function(){
    $("#box").css('background', 'linear-gradient(red, transparent)');
  });
})

但两者都不起作用。这里有一个

---

有什么想法吗？

首先尝试将

显示

属性设置为

无

JS:

CSS:

从技术上讲，

fadeIn（）

不会为已经可见的元素设置动画（淡入）。此外，我们不应将

显示

属性与

可见

属性混淆。即使

visible

属性设置为

hidden

fadeIn也不起作用<代码>显示：对于

.fadeIn（）

fadeIn（）

作用于隐藏元素，因此您可以使用

hide（）

隐藏您的

框

，然后fadeIn将起作用：

$('#input').on('focus',function(){
  $("#box").hide().css('background', 'linear-gradient(red, transparent)').fadeIn(1500);
})

希望这有帮助

---