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

Answer 2

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

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

希望这有帮助。

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

2 个答案:

DEMO