How to use fadeIn with the property css change jquery

advertisements

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

However I want it to fade in so I tried this:

$("#box").css('background', 'linear-gradient(red, transparent)').fadeIn(1500);

And also this

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

But both don't work. Here's a fiddle

Any ideas?


The fadeIn() works on hidden elements so you could hide your box using hide() then fadein will works :

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

Hope this helps.