jquery - 手风琴菜单上的Jquery淡入淡出文本

Question

寻找有关如何使文本在手风琴菜单上淡入的一点帮助。更具体地说，当单击菜单项时，我希望下面显示的文本淡入，并在该菜单关闭时淡出。我是 Jquery 的新手，虽然我了解基本概念，但我无法让它与当前代码一起工作。

示例：http ://codepen.io/Sektion66/pen/ouclt

任何帮助将不胜感激！谢谢。

Answer 1

替换$allCells.slide(Up|Down)为$allCells.fade(In|Out)。现在您还有其他问题，因为您使用的是大型选择器。尽量避免这种情况。

Answer 2

您需要挂钩到控件中的activate(event, ui) 事件。

像下面的代码示例一样创建一个处理程序，看看是否可以将整个面板淡入开始。这很可能会给您带来奇怪的结果，因为我没有对此进行测试，只是建议从哪里开始。

$( ".selector" ).accordion({
  activate: function( event, ui ) { ui.newPanel.fadeIn(); }
});

如果它与您的布局或渲染混淆，那么您需要获取对newPanel对象内部文本元素的引用并将它们全部显式淡化。

Answer 3

我已经设法结合 CSS 和 Jquery 解决了我原来的问题。

问题是......我不得不在为手风琴制作动画时强制可见性，因为图形元素挂在内容区域之外。这样做时，主要文本元素也将在动画期间显示在该区域之外。导致一脸狼狈。

修复... 使用 CSS 我最初将主文本区域的主要不透明度设置为 0，然后当单击菜单项时，它会添加一个 CSS 类，该类将淡入文本，当单击关闭时，将淡出。

所以它是最基本的形式：

CSS

.initialState {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.fadeIn { 
  opacity: 1; 
  transition: opacity 1s ease-in-out;
}

JS

.slideDown().addClass("fadeIn");
.slideUp().removeClass("fadeIn");

示例：http ://codepen.io/Sektion66/pen/ouclt

感谢大家的帮助。希望这个 Accordion 菜单对其他人有用，所以去吧！