0

我有多个<li>包含多个<div>元素的元素。其中一些具有 的起始display属性none。
基于鼠标交互，我想显示或隐藏一些<div>元素。

CSS 过渡不能过渡显示更改。并且将高度和不透明度设置为 0 并不是一个好主意，一些元素有输入或按钮。

所以下一步是使用 JavaScript 制作动画。我正在使用 jQuery。

我的问题是需要隐藏或并行显示的元素。由于 DOM 结构，我不能只隐藏或显示父元素，因为某些元素将被隐藏而其他元素将被显示。

所以我的问题是，如何有效地处理多个元素上的多个并行动画（主要是淡入淡出和幻灯片），同时保持代码的清洁和可维护性以及尽可能好的性能。

一个标记示例，其中 div 元素需要显示或隐藏：

<ul>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
</ul>

谢谢你。

4

1 回答 1

1

您可以为要一起显示和隐藏的每组元素分配相同的类。如果这听起来不熟悉，您可能需要花一些时间来熟悉这个概念。这应该让你开始：http ://api.jquery.com/hide/

<div class="first-class"></div>
<div class="second-class"></div>
<div class="third-class"></div>
<div class="first-class"></div>
<div class="third-class"></div>
<div class="second-class"></div>
于 2012-10-15T21:57:10.427 回答