jQuery fading menu similar to Windows XP

I'd like to have a menu (select box replacement dropdown) that, when clicked, fades out but the selected option stays a little longer. As the title suggests, it's the same behaviour seen in Windows XP with all the "swanky" effects turned on - the menu fades away quickly, leaving the selected option to fade away slower.

My question is how to implement this using jQuery. I could use a selector to select all children of the parent element except the selected option, but it's messy; I'd ideally like a way of fading out the container and everything in it, but being able to fade out a single element inside it, which is excluded from the container animation.

Here is some sample HTML:

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

And some pseudo jQuery:

$(document).ready(function()
{
    $("ul").not("ul li.selected").fadeOut开发者_开发问答(200);
    $("li.selected").fadeOut(600);
});

I'm sorry if I haven't been clear enough - please leave a comment and I'll try to improve my wording.

---

Why not :)

DEMO (remake)

• Grab the position ( top/left ) of the selected element: .position()
• Get the html of the selected element
• Copy the html to a temp DIV and place that tiv on the same position where the clone was.
• Hide the options menu

• Hide later the temp 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(); });

---

The part of your question that makes this a little tricky is "fading out the container and everything in it".

If you were to simply fade out the options with no concern for the container, then you could simply have one selector to fade out the non-selected options and another selector to fade out the selected options.

If you want to fade out the container all at once, then there's no getting around having to fade out the elements individually. If you perform an operation on the container, then how can you exclude one sub-element from that operation short of moving it out of the container?

If you're looking to clean this up, you might try using the jQuery .children function to select all children of the container at once. Then, you could loop thru them and fade everything out except for the one element that you want to fade out slower.

An alternative that comes to mind is that you could fade out the entire container, including the selected option on one line, and then immediately on the next line, use a selector to revert the selected option to show it it normally. Finally, on the next line, you can fade the selected option out slowly.

Please let us know what you eventually figure out.