How to properly show and hide an element (Animate.css)?

Question

JavaScript

I study Animate.css , I managed to implement most of the animation ideas, but there was a problem with the following task:

- By default, the child is hidden, when hovering over the parent, the child is assigned the animation class and the opened class (cancels the 'hidden' mode).
- The name of the animation class is taken from the data of the child itself.

Question: how to correctly implement the appearance and hiding of a child when the parent hover using Animate.css ? I would like to clearly see how people with experience write the entire logic of the script...

UPD: For example, I didn't manage to hide the child back at the end...

Code on CodePen.io

Answer 1

.addClass('opened')- and then you do not remove the class, so the descendant is not hidden.