Jquery 如何切换事件？

我有以下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");
  });
})

问题是，我如何才能淡出这些切换类事件？正如您可能看到的，我用“fadeIn（）”尝试了它，但这只会导致一个bug，所以我可能在这里遗漏了一些东西

我的问题有一个“可能的重复”，说明使用jQueryUI，我确实这么做了。这并没有解决我的问题。这些元素现在只需要更多的时间就可以看到，但是没有褪色的动画

你们中有人对此有想法吗

---

谢谢

您可以使用动画jquery函数。。。它更先进。。。但是我认为你可以改变你代码的逻辑。。。 以下是jquery函数的文档 您可以使用动画功能，如以下代码所示：

 $("#sliding_div1").animate({ paddingTop: '300px'},200);

---

animate函数有许多属性，请参见文档

在

.visible

类中是否有特定的CSS规则？ 这应该足以满足您的需要：

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

---

@Hexaholic的可能重复很遗憾，这没有帮助，请参见我的编辑。它唯一的“显示：块”；淡入效果。唯一的问题是其他元素不再消失。有没有办法用简洁的解决方案解决这个问题，或者我必须严格删除其他2个元素的类？你是对的，忘记了.fadeOut（），请查看更新的答案。这确实有效。但是，褪色的元素相互碰撞，导致菜单出现短暂泄漏。我想这是我必须解决的另一个问题。你能提供CSS和html吗？