Question

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.

Answer 1

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();
  });