Создайте эффект вверх / вниз, слайд или толчок с помощью jQuery

Question

Я заменяю src изображения, когда пользователь прокручивал до определенной точки страницы с помощью этого кода jQuery:

jQuery(function() {
    var sticky = jQuery(".sticky-icon-white");
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 115) {
            jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");

        } else {
            jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
            sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
        }

        if (scroll >= 300) {
            sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
        } else {
            sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
        }
    });
});

Это мой HTML:

<div class="sticky-icon-white">
   <img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>

Замена работает нормально, но я хочу применить к ней анимацию слайда или толчка (не знаю, как это назвать). Вот так: https://gosimple.com (значок листа в центре).

Но я не мог понять, как. Может кто-нибудь помочь мне найти решение, пожалуйста?

Вот JSFiddle: http://jsfiddle.net/bzqad296/

Заранее спасибо!

Я пробовал с slideUp(); или slideDown();, но это не работает.

EDIT:

На этом изображении вы можете увидеть эффект. Как значок меняется с белого фона, зеленых листьев на зеленый фон, белых листьев: https://prnt.sc/lgwr3f