How to use fadeIn with the property css change jquery



<input id ="input"/>
<div id="box"></div>


   width: 100px;
   height: 100px;

JS :

    $("#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

  $("#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 :

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

Hope this helps.