How to make friends jQuery animate filter saturate?

Question

css

Hello, I'm having some trouble with the jQuery animate filter saturate.

.block {
  filter: saturate(0%);
  background: url('http://hdwyn.com/wallpaper_1600x900/canada_british_columbia_mountain_lake_1600x900_hd-wallpaper-96912.jpg') center center / cover no-repeat transparent;
}

jQuery(document).ready(function($) {
  jQuery(".block").animate({'filter':'saturate(100%)'},2000);
})

Please help me find the error. If it is implemented at all)

Answer 1

$(function () {

    $({saturate: 0}).animate({saturate: 100}, {
        duration: 2000,
        easing: 'swing', // linear
        step: function () {
            $('.block').css({
                '-webkit-filter': 'saturate(' + this.saturate + '%)',
                    'filter': 'saturate(' + this.saturate + '%)'
            });
        }
    });

});

Play in the sandbox - jsfiddle.net/Deonis/e1ukq884
PS By the way, it's not necessary to do this in JS. You can simply add a class where the filter values ​​will be 100% and animate using transition or animation.