Черно-белое изображение во время анимации?

Question

[Aleksandr]

Есть некий блок, у которого background длинное цветное изображение.
Есть блок с кнопками при клики, на которые меняется background-position.
Как мне сделать таким образом, чтобы пока происходит анимация, изображение было ч/б, а как только анимация остановилась цветным?

код жээс

$('.variation__select li').click(function(event) {
    	var dataX = $(this).attr('data-x');
    	var dataY = $(this).attr('data-y');
	$('.scroll').stop().animate({backgroundPosition: ''+dataX+'% '+dataY+'%'},1000);
    });

Сделал так:

$('.scroll').queue(function() {
    		$(this).addClass('grayscale');
    		$(this).dequeue();
    	})
		$('.scroll').stop().animate({backgroundPosition: ''+dataX+'% '+dataY+'%'},1000);
		$('.scroll').queue(function() {
    		$(this).removeClass('grayscale');
    		$(this).dequeue();
    	})

Класс и добавляется и убирается как нужно. Только вот цвет не меняется.

Comments

[Aleksandr]

Николай

Answer 1

[Николай]

Ч/б можно сделать при помощи css фильтров:

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Просто вешайте перед анимацией класс с этими свойствами, затем убирайте.