hide

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

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

hide( )

Скрывает каждый из совпавших элементов набора, если они были видимыми. Если все элементы скрыты, то ничего не происходит.
То же самое, что и hide( скорость, [вызов] ), только без анимации.
Примеры:

По нажатию скрывает все параграфы и переходит по ссылке.
    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });
<!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(){

    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });

  });
  </script>

</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>

</body>
</html>
Name Type

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

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

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

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

function callback() {
  this; // dom element
}
Примеры:
Медленно скрывает все видимые параграфы, длительность анимационных эффектов — 600 миллисекунд.
    $("button").click(function () {
      $("p").hide("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").hide("slow");
    });    

  });
  </script>

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

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

Скрывает все блоки span (слова в данном случае), используя режим скорости fast. Каждая анимация занимает 200 миллисекунд. По завершению очередной анимации начинается следующая.

    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee);
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });
<!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(){

    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee);
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

  });
  </script>

  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
</head>
<body>
  <button id="hidr">Hide</button>

  <button id="showr">Show</button>
  <div>
    <span>Once</span> <span>upon</span> <span>a</span>
    <span>time</span> <span>there</span> <span>were</span>
    <span>three</span> <span>programmers...</span>

  </div>
</body>
</html>
По нажатию скрывает элементы div в течение 2 секунд, затем, когда анимация завершена, удаляет блок div. Попробуйте нажимать на несколько блоков одновременно.
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });
<!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(){

    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

  });
  </script>

  <style>
  div { background:#ece0fb; width:30px;
        height:40px; margin:2px; float:left; }
  </style>
</head>
<body>
  <div></div>
</body>

</html>
Name Type