toggle

« Обратно к странице эффектов

[редактировать]

toggle( )

Переключает режим отображения каждого из элементов набора.
Если элемент скрыт, то данная функция отображает его (используя метод show); если элемент видимый — скрывает его (используя метод hide).
Примеры:

Переключает режим отображения параграфов.

    $("button").click(function () {
      $("p").toggle();
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $("p").toggle();
    });

  });
  </script>

</head>

<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>

</body>
</html>
Name Type

[редактировать]

toggle( переключатель )

Переключает режим отображения каждого из элементов набора в зависимости от значение переключателя (true — отображает элементы, false — скрывает элементы).
Если значение переключателя true, то данная функция отображает элементы (используя метод show); если значение false — скрывает их (используя метод hide).
Аргументы:

переключатель Логическое значение
Переключатель режима отображения.
Примеры:

Отображает все параграфы, затем скрывает их, и так в цикле.
    var flip = 0;
    $("button").click(function () {
      $("p").toggle( flip++ % 2 == 0 );
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var flip = 0;
    $("button").click(function () {
      $("p").toggle( flip++ % 2 == 0 );
    });

  });
  </script>

</head>

<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>

</body>
</html>
Name Type

[редактировать]

toggle( скорость, [вызов] )

Переключает режим отображения всех совпавших элементов набора с использованием анимационных эффектов, после чего опционально запускает указанную в аргументе вызов функцию.
Высота, ширина и прозрачность каждого элемента меняются динамически в соответствии с указанной скоростью. Начиная с jQuery версии 1.3 атрибуты padding и margin также анимируются, создавая при этом более плавный эффект.
Аргументы:

скорость Строка, Число
Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000).
вызов (необязательно) Функция
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.

function callback() {
  this; // dom element
}
Примеры:

Скрывает/отображает все параграфы, длительность анимационных эффектов — 600 миллисекунд.
    $("button").click(function () {
      $("p").toggle("slow");
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $("p").toggle("slow");
    });    

  });
  </script>

  <style>
  p { background:#dad;
 font-weight:bold;
  font-size:16px; }
  </style>
</head>
<body>
  <button>Toggle 'em</button>
  <p>Hiya</p>

  <p>Such interesting text, eh?</p>
</body>
</html>
Name Type