Question

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

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

Answer 1

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

Answer 2

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

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

$( ".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");

感谢大家的帮助。希望这个手风琴菜单对其他人来说很方便，所以坚持下去！