Question

我想要一个菜单（选择框更换下拉菜单），当点击时，它会淡出，但选定的选项会保持更长时间。正如标题所暗示的那样，它在Windows XP中看到的所有“时髦”效果都被打开了 - 菜单快速消失，让选定的选项逐渐消失。

我的问题是如何使用jQuery实现它。我可以使用一个选择器来选择父元素除了所选选项之外的所有子元素，但它很混乱;理想情况下，我喜欢淡出容器及其中的所有内容，但能够淡出其中的单个元素，这是从容器动画中排除的。

以下是一些示例HTML：

<ul>
    <li>Option</li>
    <li>Option</li>
    <li class="selected">Option</li>
    <li>Option</li>
    <li>Option</li>
</ul>

还有一些伪 jQuery：

$(document).ready(function()
{
    $("ul").not("ul li.selected").fadeOut(200);
    $("li.selected").fadeOut(600);
});

如果我不够清楚，我很抱歉 - 请发表评论，我会尽力改善措辞。

Answer 1

你的问题部分使这个有点棘手的是“淡出容器及其中的一切”。

如果您只是简单地淡出选项而不关心容器，那么您可以只使用一个选择器淡出未选择的选项，使用另一个选择器淡出选定的选项。

如果你想一次淡出容器，那么就无法单独淡出元素。如果对容器执行操作，那么如何从该操作中排除一个子元素，而不是将其从容器中移出？

如果您想要清理它，可以尝试使用jQuery .children函数一次选择容器的所有子项。然后，你可以循环遍历它们并将所有内容淡出，除了你想要淡出的一个元素。

可以想到的另一种方法是，您可以淡出整个容器，包括一行中的所选选项，然后立即在下一行，使用选择器还原所选选项以正常显示它。最后，在下一行，您可以慢慢淡出所选选项。

请告诉我们您最终会弄明白的事情。

Answer 2

为什么不：）

DEMO (remake)

抓住所选元素的位置（上/下）：.position()
获取所选元素的html
将html复制到临时DIV，并将该文件放在克隆所在的同一位置。
隐藏选项菜单
稍后隐藏临时DIV

$（'。options li'）。click（function（）{ var thisEl = $（this）; var thisPos = thisEl.position（）; $（'＃temp'）。css（{left：thisPos.left +'px'，top：thisPos.top +'px'}）;

$（'＃temp'）。html（thisEl.html（））。fadeTo（0,1）.delay（700）.fadeTo（1000,0，function（）{ $（ '＃临时'）空（）; }）; $（ “选项”。）fadeToggle（）。 }）;