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
有什么想法吗?
最佳答案
最初尝试将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
关于javascript - 如何使用 fadeIn 与 css 属性更改 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35754767/