Animation on jquery class removal?

Question

css

Something I can’t google a simple example, maybe I’m entering something wrong, in general there is a leaving panel:

$(document).ready(function(){
      $panel = $("#panel");
      $menu = $("#menu");
      $menu.mouseover(function(){
        $panel.addClass("qqw");
      });
      $panel.mouseover(function(){
        $panel.removeClass("qqw");
      });
    });

CSS:

.qqw {
  transform: translate3d(206px, 0px, 0px)!important;
  -webkit-transform: translate3d(206px, 0px, 0px)!important;
  transition: -webkit-transform 700ms, transform 700ms;
}

A transition is assigned to the qqw class, so everything appears smoothly and beautifully, but how to hide the socket so that the transition is also applied, tell me the design? In general, there is an idea to write a transition inline, and change it to another class, but something has not worked out so far ((

Answer 1

Some terrible tips are listed above, I do not advise you to use the standard jQuery methods for animation at all.
In your case, the animation does not work when the class is removed, because it is actually attached to this class. You need to set the transition property on the .panel element itself

.panel {
  transition: transform 0.7s;
}

Answer 2

Gentlemen, formulate your questions clearly. Give the information you need, don't give the information you don't need. Where does the panel go, up, sideways, to my grandmother? under what circumstances? On jquery or css after all? Well, yes, you have the qqw class, I didn’t see it right away, this clarifies everything.
maybe you need something like

$("#panelka").bind("mouseout", function() {
    $(this).slideUp(200);
});

Answer 3

Does it appear on hover or on click?
If on hover, then try this:

$menu.mouseover(function(){
$panel.toggleClass( "qqw", 1000, "easeOutSine" );
});