如何淡化切换事件？答案

【问题标题】：How can I fade toggle-events?如何淡化切换事件？
【发布时间】：2015-09-03 07:53:58
【问题描述】：

我有以下 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-events？如您所见，我使用“fadeIn()”进行了尝试，但这只会导致错误，所以我可能在这里遗漏了一些东西。

我的问题有一个“可能重复”，说明使用 jQueryUI，我这样做了。这并没有解决我的问题。元素现在只需要更多时间才能可见，但没有褪色动画。

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

谢谢！

【问题讨论】：

jQuery: how to fade between classes? 的可能重复项
@Hexaholic 不幸的是，这没有帮助，请参阅我的编辑。

标签： jquery fadein toggleclass

【解决方案1】：

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

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

【讨论】：

它唯一的“显示：块；”
褪色作品。唯一的问题是其他元素不再消失。有没有办法用你的巧妙解决方案来解决这个问题，还是我必须严格删除其他 2 个元素的类？
你是对的，忘记了 .fadeOut()，请查看更新后的答案。
确实奏效了。然而，淡出的元素相互碰撞，产生了菜单的短暂泄漏。我想这是我必须解决的另一个问题。
可以提供CSS和html吗？

【解决方案2】：

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

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

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

【讨论】：