Question

我有多个<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>

谢谢。

Answer 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>

有关如何为多个DOM元素设置动画的建议

1 个答案: