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

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

为什么不呢:)

DEMO (remake)

• 获取所选元素的位置(顶部/左侧):.position()
• 获取所选元素的 html
• 将 html 复制到临时 DIV 并将该 tiv 放在克隆所在的同一位置。
• 隐藏选项菜单

• 稍后隐藏临时 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(){ $('#temp').empty(); }); $(".options").fadeToggle();});