JQuery анимированное изображение инвертировать

Question

Я пытаюсь оживить инверсию цветов изображения. Я могу инвертировать изображение так:

 $("#menuButtonImage").css({filter : "invert(100%)"});

Это мой код анимации, который не выдает ошибки в консоли, но не анимирует:

$("#menuButtonImage").animate({filter : "invert(100%)"}, "slow");

Есть идеи, почему это может быть?

Answer 1

Рабочий HTML:

<div id='menuButton'>
    <button id='menuButtonButton'>
        <img src="./images/MenuIcon.png" id='menuButtonImage'>
    </button>
</div>

CSS:

#menuButton button img {
   transition: all 1.0s ease;
}

Jquery:

$("#menuButtonButton").click(function() {
     $("#menuButtonImage").css({filter : "invert(100%)"});
});