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

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

为什么不 ：）

演示版（重制版）

• 获取所选元素的位置（顶部/左侧）：.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(); });