如何使用fadeIn与css属性更改jquery

Question

HTML：

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

CSS：

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

JS：

$('#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)');
  });
})

但两者都不起作用。 这是一个小提琴

有任何想法吗？

Answer 1

尝试将display属性设置为none ，

JS：

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

CSS：

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

从技术上讲， fadeIn()不会动画（淡入）已经可见的元素。 另外，我们不应该将display属性与visible属性混淆。 即使使用hidden fadeIn设置visible属性也不起作用。 display : none是.fadeIn()的有效值

DEMO

Answer 2

fadeIn()适用于隐藏元素，因此您可以使用hide()隐藏您的box然后fadein将起作用：

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

希望这可以帮助。

---