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

How to use fadeIn with css property change jquery

本文关键字：jquery 一起 属性 fadeIn css      更新时间：2023-09-26

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

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

有什么想法吗？

> 尝试最初将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淡入也不起作用。 display : none是有效的.fadeIn()

演示

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

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

希望这有帮助。

相关文章：