Calling animation functions?

Question

JavaScript

Good afternoon. There was a question.
I am writing an animation for a button with the following logic:
if the mouse cursor is at the top of the screen, then I call the function to show the button, if at the bottom, then the function is called to hide the same button (screenshot below).

However, the function is called only once, when the page is reloaded, and there is no switching between states. That is, if I reloaded the page and the cursor was at that moment at the bottom, then the button will automatically be invisible, if at the top, it will be displayed.
How can I implement the ability to switch the state without reloading the page?
Screenshot of the plugin call:
(according to the technical task, you need to call it this way, and not through the selector)
In the console, the functions themselves are called, that is, the log is triggered, but the properties are not changed. I can't figure out what the problem is.
By default, the button has a width of 0
(The background property was added solely to test the work)