javascript - Change a css attributte from x to y over time -

here current code:

jquery(function(){     $(document).ready(function(){         $('#cont').click(function(e){                 $('#splashtext').fadeout(300, function(){                 $('#bgimage').animate('filter: blur(0px)', 300);             });         });     }); }) 

i trying have #splashtext fade out (which works fine), while @ same time #bgimage changes it's blur (set via filter: blur(5px);)from 5px 0px jquery. also, #cont button supposed trigger transition onclick.

what you're doing passing callback fadeout, means animate function called after fadeout completes execution. try instead:

$('#cont').click(function(e){         $('#splashtext').fadeout(300);     $('#bgimage').animate(...);  // animation here }); 

also, you're using animate() function wrong. this explanation on how use blur filter in jquery animate. relevant code:

$('#bgimage').animate({blurradius: 10}, {     duration: 500,     easing: 'swing', // or "linear"                      // use jquery ui or easing plugin more options     step: function() {         $('#bgimage').css({             "-webkit-filter": "blur("+this.blurradius+"px)",             "filter": "blur("+this.blurradius+"px)"         });     } }); 

$(function() {    $('#cont').click(function(e) {      $('#splashtext').fadeout(600);      $('#bgimage').animate({        blurradius: 5      }, {        duration: 600,        easing: 'linear',        // use jquery ui or easing plugin more options        step: function() {          this.blurradius = 5 - this.blurradius;          console.log(this.blurradius);          $('#bgimage').css({            "-webkit-filter": "blur(" + this.blurradius + "px)",            "filter": "blur(" + this.blurradius + "px)"          });        }      });    });    });

#bgimage {      filter: blur(5px);      -webkit-filter: blur(5px);      z-index:-1;  }  #cont {      margin-left:200px;  }  * {      position: absolute;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>    <button id="cont">click</button>    <h1 id="splashtext">splash</h1>    <img src="http://placehold.it/200x200" id="bgimage"/>