我怎样才能淡出切换事件？

Question

我有以下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()" 尝试过，但这只会导致错误，所以我可能在这里遗漏了一些东西。

我的问题中有一个 "possible duplicate"，说明要使用 jQueryUI，我确实这样做了。这并没有解决我的问题。元素现在只需要更多时间即可显示，但没有淡入淡出的动画。

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

谢谢！

Answer 1

您可以使用 animate jquery 函数...它更高级...但我认为您可能会更改代码的逻辑... 这是 jquery 函数的文档 http://api.jquery.com/animate/ 您可以像下面的代码一样使用动画功能：

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

animate 函数有很多属性，请参阅文档

Answer 2

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

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

我怎样才能淡出切换事件？

How can I fade toggle-events?

jquery

fadein

toggleclass