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

Почему бы и нет:)

DEMO (римейк)

• Захват позиции (сверху / слева) выбранного элемента: .position()
• Получить HTML-код выбранного элемента
• Скопировать HTML-файл во временный DIV и поместить этот tiv в ту же позицию, где находился клон.
• Скрыть меню параметров

• Позже скрыть временную DIV

  $ ('. Options li'). Click (function () {var thisEl = $ (this); var thisPos = thisEl.position (); $('#temp'). css ({слева: thisPos.left + 'px', top: thisPos.top + 'px'});
  $ ('# temp'). html (thisEl.html ()).fadeTo (0, 1) .delay (700) .fadeTo (1000, 0, function () {$ ('# temp'). empty ();}); $ (". options"). fadeToggle ();});

Answer 2

Часть вашего вопроса, которая делает это немного сложным, - это «исчезновение контейнера и всего в нем».

Если бы вы просто исчезли из опций, не заботясь о контейнере, то выможет просто иметь один селектор для затухания невыбранных опций, а другой селектор для затухания выбранных опций.

Если вы хотите, чтобы контейнер полностью исчезал одновременно, то вам не придется обойтись без затуханияэлементы индивидуально.Если вы выполняете операцию над контейнером, то как вы можете исключить один субэлемент из этой операции, кроме перемещения его из контейнера?

Если вы хотите очистить это, вы можете попробовать использоватьфункция jQuery .children для одновременного выбора всех дочерних элементов контейнера.Затем вы можете зацикливать их и постепенно затухать, за исключением одного элемента, который вы хотите затухать медленнее.

Альтернативой, которая приходит на ум, является то, что вы можете затухать весь контейнер, включая выбранный параметр.в одной строке, а затем сразу в следующей строке, используйте селектор, чтобы отменить выбранную опцию, чтобы показать ее как обычно.Наконец, на следующей строке вы можете постепенно поменять выбранную опцию.

Пожалуйста, дайте нам знать, что вы в итоге выясните.