类似于Windows XP的jQuery淡入淡出菜单

我想有一个菜单选择框替换下拉列表，点击时，淡出，但选定的选项停留一点时间。正如标题所示，这与Windows XP中打开所有时髦效果时的行为相同——菜单会快速消失，而所选选项的消失速度较慢

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

以下是一些示例HTML：

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

---

如果我说得不够清楚，我很抱歉-请留下评论，我将尝试改进我的措辞。

您的问题中有点棘手的部分是容器和容器中的所有内容褪色

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

如果您想一次全部淡出容器，那么不必单独淡出元素。如果在容器上执行操作，那么除了将其移出容器外，如何从该操作中排除一个子元素

如果您希望清理此问题，可以尝试使用jQuery.children函数一次选择容器的所有子级。然后，你可以循环通过它们，淡出所有的东西，除了一个你想慢慢淡出的元素

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

请让我们知道您最终的解决方案。

为什么不：

抓住所选元素顶部/左侧的位置：。位置 获取所选元素的html 将html复制到临时DIV，并将该tiv放置在克隆所在的相同位置。 隐藏选项菜单 稍后隐藏临时DIV

$'.options li'。单击函数{ var thisEl=$this； var thisPos=thisEl.位置； $'temp'.css{left:thisPos.left+'px'，top:thisPos.top+'px'}； $'temp'.html thisEl.html.fadeTo0，1.delay700.fadeTo1000，0，函数{ $'temp'。为空； }; $.options.fadeToggle； };

---

谢谢你的回复。我今天将研究您的三线解决方案，然后再与您联系。遗憾的是，您不能更容易地获得这种行为，尽管这是一个相当孤立的用例。后续：我尝试了上面的想法，但不幸的是没有成功：-@roXon有一个很好的解决方案，可以解决我的问题。再次感谢您的输入：-一个非常整洁的演示有罗克逊！谢谢你花时间和精力。我一直在寻找一个更简单的解决方案，但似乎没有一个：-这工作得很好，虽然当菜单重新打开时，该选项不会再次变为可重新选择，但我可以添加该代码。谢谢你开始推送。@Jam是的，我现在知道在一次预测试之后，它们不再是可选择的，但这是少行/多行的问题：顺便说一句，我也会在未来的网站上使用它；谢谢你的主意！如果我可以偷的话@詹姆斯在这里！我重新编辑了演示。我只需要在温度消失后清除它！现在它工作得很好！我也去掉了一些代码。像个老板。非常感谢你，罗克森。当然，你可以窃取我的想法-我认为这是一个相当整洁的效果。我同意！这是一个粗鲁的说法，但有点幼稚…：

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