Поочередное выполнение функций

<< Эффекты
.toggle()

Поочередно выполняет одно из нескольких заданных действий. Имеет четыре варианта использования:

.toggle(handler1(eventObject), handler2(eventObject), [handler3(eventObject)]):jQuery1.0
Поочередно выполняет одну из двух или более заданных функций handler, в ответ на "клик" по элементу.
.toggle([duration], [callback]):jQuery1.0

Изменяет видимость выбранных элементов на противоположную (показывает/скрывает).

duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд).
callback — функция, которая будет вызвана после завершения анимации.

.toggle([duration],[easing],[callback]):jQuery1.4.3

duration — см. выше.
easing — изменение скорости появления/исчезновения (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

.toggle(showOrHide):jQuery1.3
Только показывает (showOrHide = true) или только убирает с экрана (showOrHide = false) выбранные элементы на странице.

Замечание: Отметим существенное отличие первого варианта использования метода toggle(), от трех других: в случае первого варианта, метод используется как обработчик события onClick у выбранных элементов, в то время как два остальных варианта вызываются непосредственно для изменения состояния выбранных элементов.

Примеры

Рассмотрим страницу со списком нескольких элементов и продемонстрирует работу с первым вариантом функции toggle(): 

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    ul{margin:10px; list-style:inside circle; font-weight:bold;}
    li{cursor:pointer;}
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~ul~gt~
    ~lt~li~gt~Пришел~lt~/li~gt~
    ~lt~li~gt~Увидел~lt~/li~gt~
    ~lt~li~gt~Победил~lt~/li~gt~
    ~lt~li~gt~Расслабился~lt~/li~gt~
    ~lt~li~gt~И отхватил...~lt~/li~gt~
  ~lt~/ul~gt~
  ~lt~script~gt~
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

В результате, при первом "клике" по элементу списка, он поменяет свой цвет на голубой, при втором — на красный, а при третьем вернется в исходное состояние.


Следующий пример демонстрирует работу второго и третьего варианта использования метода toggle() на странице с теми же элементами: 

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    ul{margin:10px; list-style:inside circle; font-weight:bold;}
    li{cursor:pointer;}
  ~lt~/style~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~ul~gt~
    ~lt~li~gt~Пришел~lt~/li~gt~
    ~lt~li~gt~Увидел~lt~/li~gt~
    ~lt~li~gt~Победил~lt~/li~gt~
    ~lt~li~gt~Расслабился~lt~/li~gt~
    ~lt~li~gt~И отхватил...~lt~/li~gt~
  ~lt~/ul~gt~
~lt~script~gt~
  $("li").click(function(){
    $(this).toggle(1000, function(){
      $(this).toggle(true);
    })
  });
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

в результате, при "клике" по элементу списка, он в начале начнет плавно исчезать (за счет toggle(1000, func...), а после полного исчезновения, будет вызван обработчик окончания анимации. Он возвратит видимость исчезнувшему элементу списка.

Ссылки

Поисковые ключи:
  • поочередное появление/исчезновение элементов
  • поочередный вызов одной из нескольких пользовательских функций
  • переключатель видимости элементов
  • .toggle()
  • toggle()