fadeOut on scroll event using sticky-top element

I'm using bootstrap 4.1.3 / jQuery 3.3.1 with a sticky-top element.

on scroll down I want to hide the sticky-top element (a div)
on scroll up I want to show the element

The result I have at the moment is:

when scrolling down a loop of fadeOut then fadeIn happens
when scrolling up fadeIn happens (that's what I want)

prototype demo: https://terminaladdict.com/ta_skeleton/
I've only posted the relevant code here.

I'm guessing I need to stop the execution somehow with a function callback in fadeOut? (note the comment in my code)

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').fadeOut(function(){ 
                    // do something here to stop fadeIn;
                });
            } else {
                $('.searchBar').fadeIn();
            }
            lastScrollTop = st;
        });
})

<div class="searchBar container-fluid sticky-top p-3 topbar">
  <div class="container">
    <div class="terminalBG d-flex flex-row rounded border p-2 align-items-center">
      <a class="ta_logo d-flex" href="#" data-toggle="tooltip" title="something">
      text
      </a>
      <input type="text" name="query" id="query" placeholder="Search this website ..." class="form-control d-flex" />
    </div>
  </div>

Solution

Changed to css transitions:

$(document).ready(function(){
     var lastScrollTop = 0;
     $(window).scroll(function () {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                $('.searchBar').addClass('fadeOut');
                $('.searchBar').removeClass('fadeIn');
            } else {
                $('.searchBar').addClass('fadeIn');
                $('.searchBar').removeClass('fadeOut');
            }
            lastScrollTop = st;
        });
});

Works perfectly now .. not sure why fadeIn and fadeOut weren't working ?