Теперь давайте рассмотрим небольшой набор команд для спецэффектов: анимационные эффекты отобразить / скрыть, развернуть/ свернуть, а также изменение прозрачности. В конце концов, все мы люди, и ничто человеческое нам не чуждо, в том числе любовь к анимации и различного рода эффектам. (Но, пожалуйста, не перегните палку. )

Прием Show / Hide, медленнее и медленнее, а затем быстрее и быстрее

Прием Show / Hide (отобразить / скрыть слой) — довольно распространен. Однако, до использования JQuery мне всегда приходилось быть несколько многословным (и в большинстве случаев я был вынужден искать нужный код через поисковик, как, например, в этом случае, когда жертвой моего грабежа стал: http://www.geocities.com/technofundo/tech/js/showhide.html):

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) //1 - видимый, 0 - спрятанный
{
  if (document.layers)
  {
    document.layers[szDivID].visibility = iState ? "show" : "hide";
  }
  else if  document.getElementById)
  {
    var obj = document.getElementById(szDivID);
    obj.style.visibility = iState ? "visible" : "hidden";
   }
   else  if (document.all)
   {
    document.all[szDivID].style.visibility = iState ? "show" : "hidden";
   }
}
-->
<script>

Но теперь с помощью JQuery я могу просто написать (да, вы отгадали) show(), чтобы отобразить и hide(), чтобы скрыть элемент или подходящий набор элементов:

$(‘div’).show();
$(‘div’).hide();
Конечно, также можно воспользоваться функцией toggle(), которая определяет, а затем меняет состояние данного элемента на противоположное. Это сейчас отображается? Да-> Тогда скрыть; Нет -> показать.

Все просто.

$('#clickme').click(function()
{
 $('div').toggle;
});

Огромное преимущество команд show/hide/toggle состоит в том, что они дают возможность добавить анимацию (регулировку скорости), дабы в полной мере воссоздать волшебство появления, исчезновения и повторного возникновения.

Другими словами, элемент управления скоростью встречается не часто, однако для JQuery это норма. Отныне мы сможем с легкостью управлять скоростью таких анимационных эффектов, как slide, fade, animate и др. Существует три заданные по умолчанию скорости: низкая, средняя и высокая. Кроме того, безусловно, есть возможность задать нужную скорость вручную в миллисекундах.

Следующая строка кода медленно отображает и скрывает слой.
$(‘div#toggle’).toggle(‘slow’”>);

Развернуть и свернуть, изменить прозрачность

Реализация эффекта разворачивания и сворачивания слоя всегда была задачей непростой. Однако, больше это не так. Теперь можно просто использовать эти «говорящие» интуитивно понятные методы: slideUp(speed, callback) и slideDown(speed, callback). И, конечно, не стоит забывать о команде toggle. Совместно с эффектом сворачивания и разворачивания команда toggle будет slideToggle(speed, callback).
Для изменения прозрачности используются следующие команды: fadeIn(speed, callback), fadeOut(speed, callback).
Пример:

$('#clickme').click(function() {
 $('div#slideme').slideToggle("slow")
});

$('#fademe').hover(
 function(){$('img#star').fadeIn("slow");},
 function(){$('img#star').fadeOut("slow");}
);

Популярность: 100%