javascript - 如何使用 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)');
  });
})

但是两者都不行。这是一个 fiddle

有什么想法吗？

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 属性混淆。即使 visible 属性设置为 hidden fadeIn 也不会起作用。 display : none 是 .fadeIn()

的有效显示

DEMO