如何淡出切换事件？

debugcn 发表于 Dev

Atr_Max

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

问题是，如何淡化那些toggleClass事件？如您所见，我使用“ fadeIn（）”进行了尝试，但这只会导致错误，因此我可能在这里丢失了一些东西。

我的问题有一个“可能的重复”，指出要使用jQueryUI。这没有解决我的问题。现在，这些元素仅需要更多时间就可以看到，但是没有褪色的动画。

你们中有人对此有想法吗？

谢谢！

伊甸园

您在.visible课堂上有特定的CSS规则吗？这应该足以满足您的需求：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。