Javascript OnClick Fade Div в (короткий код)

Question

Я искал повсюду и не могу найти точно, что я после где-либо.

Структура HTML в основном.

<ul> 
   <li><a href="">link</a></li>
   <div id="us">hidden info</div>
</ul>

Структура CSS.

#us {display:none}

Мне бы хотелось, чтобы при нажатии «ссылка» div «us» изменялся с dipslay: нет;отображать: блокировать, плавно переходить в как можно меньше строчек кода, а затем снова при щелчке по ссылке переключается обратно на отображение: скрыто.

Я знаю, что есть много вещейэто может сделать это, но я действительно ищу эту простоту в коде.

спасибо за ваше время x

Answer 1

Вы можете просто использовать .toggle() с продолжительностью (работает во всех версиях jQuery), например так:

$("ul li a").click(function() { $("#us").toggle("fast"); });

Или, если вы используете jQuery 1.4.4+, используйте .fadeToggle() следующим образом:

$("ul li a").click(function() { $("#us").fadeToggle(); });

Обратите внимание, что <div> не является допустимым дочерним элементом <ul>, поэтому он может неожиданно отображаться в нескольких браузерах... было бы лучше использовать правильную разметку.

Answer 2

Примерно так:

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});

Answer 3

спасибо всем за ваш вклад! Вы были очень полезны! Последний фрагмент, который я использовал и который я счел наиболее подходящим, был от Ника.

$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });

так что спасибо еще раз всем! и надеюсь, что кто-то еще может найти это полезным! х

Answer 4

Если вам нужен вариант jQuery UI, я могу только рекомендовать его. Пользовательский интерфейс jQuery расширяет jQuery множеством приятных эффектов:

show( effect, [options], [speed], [callback] )

Но посмотрите на сам сайт: http://jqueryui.com/demos/show/

Answer 5

Поскольку в ядре jQuery нет переключателя затухания, я бы использовал:

$('a').toggle(
    function() { $('#us').fadeIn(); },
    function() { $('#us').fadeOut(); }
);