Search code examples
jqueryfadeintoggleclass

How can I fade toggle-events?

I have the following jQuery

$(".dropdown-menu-1").click(function() {
  $(".submenu-1").toggleClass("visible").removeClass(function() {
    $(".submenu-2").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-2").click(function() {
  $(".submenu-2").toggleClass("visible").fadeIn().removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-3").click(function() {
  $(".submenu-3").toggleClass("visible").removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-2").removeClass("visible");
  });
})

Question is, how can I fade those toggleClass-events? As you may can see I tried it with "fadeIn()" but this only results in a bug, so I may be missing here something.

Theres an "possible duplicate" of my question, stating to use jQueryUI, which I did. This hasn't solved my problem. The elements now only needs more time to gets visible, but there is no fading animation.

Does anyone of you is having an idea regarding this?

Thanks!

Solution

  • Do you have specific CSS rules in .visible class ? This should be enough for your needs :

    $(".dropdown-menu-1").click(function() {
    $(".visible").fadeOut().removeClass("visible");
    $(".submenu-1").fadeIn().addClass("visible");
});
...