How to add slow blur effect using jquery and css

Suppose you have to blur this image:

To show it like this and this blur effect should be gradual:

This is one solution to achieve this:

$(document).ready(function()
{
animationTime();
});

function slowblur(number)
{
$('#firstimage').css({'filter':'blur('+number+'px)','-webkit-filter': 'blur('+number+'px)','-moz-filter': 'blur('+number+'px)',
'-o-filter': 'blur('+number+'px)','-ms-filter': 'blur('+number+'px)'});
}
function animationTime()
{
setTimeout("slowblur(1)",1000);
setTimeout("slowblur(2)",1100);
setTimeout("slowblur(3)",1200);
setTimeout("slowblur(4)",1300);
setTimeout("slowblur(5)",1400);
setTimeout("slowblur(6)",1500);
setTimeout("slowblur(7)",1600);
setTimeout("slowblur(8)",1700);
setTimeout("slowblur(9)",1800);
setTimeout("slowblur(10)",2000);
setTimeout("slowblur(11)",2100);
setTimeout("slowblur(12)",2200);
setTimeout("slowblur(13)",2400);
setTimeout("slowblur(14)",2500);
setTimeout("slowblur(15)",2600);
},
2800);

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com