Slide effect with JQuery I'm not very good with Javascript/Jquery, and I don't understand something.

I display a full size image when the user arrives for the first time on the homepage. If the user scrolls, the image disappears slowly and the homepage appears.

To hide the image, I use the jquery function .hide(). It works correctly, but I want another animation because the default isn't very elegant.

To do that, it seems I need to include core/jquery.ui, but even if I include it in my dependencies for my library, I get the following error:


  TypeError: r.easing[this.easing] is not a function


And if I include core/jquery.ui.effects.slide, I get this error:


  TypeError: g[i] is undefined


Here my code:

my_module.libraries.yml

home:
  js:
    js/home.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
    - core/jquery.cookie
    - core/jquery.ui.effects.slide


js/home.js

(function ($, Drupal, drupalSettings) {

  'use strict';

  Drupal.behaviors.pre_home = {
    attach: function (context, settings) {
    $(window).scroll(function () {
      var popup = $('#pre-home');
      console.log("Hide"); // Display correctly when I scroll
      popup.hide("slide", {direction: "top"}, 1000); // Doesn't work in this case, work I remove all parameters but not with the effect I want.
        });
    },
  };
})(jQuery, Drupal, drupalSettings);


I don't know what I'm doing wrong.
A big thank to @No Sssweat  for the answer. My methodology was good, I done an error in the definition of the direction.

So, you need to include the core/jquery.ui.effects.slide in your libraries.yml file and follow this documentation http://api.jqueryui.com/slide-effect/.