Простейшими функциями для создания анимационных эффектов являются функции .show() и .hide(). При запуске без параметра они просто добавляют свойство  display:none; в атрибут стиля элемента или удаляют его.

 
Скройте абзац с идентификатором bar, используя следующий код:
   $("#bar").hide();
Абзац исчезнет из окна браузера, но его по-прежнему можно будет увидеть в DOM с помощью средства просмотра элементов. Чтобы сделать элемент вновь видимым, вызовите метод . .show():
   $("#bar").show();
В результате отображение элемента на экране восстановится.

 
Чтобы сокрытие и отображение элементов можно было использовать для создания анимационных эффектов, для обоих методов предусмотрена передача параметра, определяющего длительность перехода (в миллисекундах), а также функции обратного вызова, которая запускается по завершении анимации. Для демонстрации такого эффекта добавьте фон и рамку в абзац с идентификатором bar, а затем скройте его с длительностью перехода 2 секунды и вызовите функцию, которая выводит сообщение в окне консоли.

$("#bar")
    .css({
            "background":"yellow",
            "border":"1px solid black"
        })
    .hide(2000,function(){
            console.log("Анимация завершена!");
        });

В процессе выполнения этого кода в элемент добавляются стилевые свойства CSS и запускается метод  .hide(). Размеры элемента уменьшаются в горизонтальном и вертикальном направлениях, и он постепенно блекнет. Через две секунды элемент полностью исчезает, и функция обратного вызова выводит в окне консоли сообщение: "Анимация завершена!".