Как подружить jQuery animate filter saturate?

Question

[Сергей Горячев]

Привет, что-то у меня запарка с 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);
})

Помогите найти ошибку. Если это вообще реализуется)

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 + '%)'
            });
        }
    });

});

Поиграться в песочнице - jsfiddle.net/Deonis/e1ukq884

P.S. Кстати, тут совсем не обязательно в JS это делать. Можно просто добавлять класс, где значения фильтров будут 100% и анимировать с помощью transition или animation.

Comments

[Сергей Горячев]

Нечего играться :) Все работает. Спасибо)