Topic: Possible conflict between MDB and Jquery animation, target element does not animate until it is clicked

USI premium asked 1 year ago

I have a function that fades out an animated gif loader, been using it flawlessly for years on various websites;function fadeOutLoader(Selector){$(Selector).children().fadeOut('slow');}

Once I installed MDB on my brand new bootstrap5 website, it started acting funny... before installing MDB it worked great... after installing MDB, it does not work properly anymore, the loader gif stays there until I click it at which point the animation starts and it fades out.... There are no errors in the console... I can manually type the jquery or JS methods into the console and same behavior.

Same behavior for;$(Selector).children().animate({ animation:'fade-out' });

and also for;const element = document.getElementById('MyElementID');const animate = new mdb.Animate(element, { animation: 'fade-out', });animate.init();

For all cases, there are no errors in console... animated gif remains visible until clicking the gif at which point it disappears... there is no js attached the the gif, instead I click a button which is supposed to hide the gif.

Seems to me that MDB animations is conflicting with Jquery animations...?

Here is a sample link and code that I created to demonstrate the issue;

Mateusz Lazaru staff answered 1 year ago


Thank you for reporting this. There is a bug in package version 5.0.0 which causes the conflict. It will be fixed soon.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: Acer Laptop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes