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

//пример раз
$('.foo').hide(2000,function(){
       alert("Усе готово, шеф!");
       });
//пример два
$('.foo')
   .css({
      "background":"yellow",
      "border":"2px solid green"
       })
  .hide(1500, function(){
       $('.foo').show(2000);
      });
//вариант вставки скрипта в html
<script type='text/javascript'>
$(function (){
     $('.foo').hide(2000,function(){
          alert("Усе готово, шеф!");
                     });
          });
</script>

 

.fadeIn(), .fadeOut() и .fadeTo()
плавное появление и исчезновение элемента. Первые два работают с display:none, третий с opacity до указанного значения. Для первых двух есть строковые параметры fast (200мс) и slow (600мс). Доппараметры - время, для третьего - прозрачность и функция обратного вызова

$("form")
        .fadeOut(8000, function(){
              alert("Крыша уехала)");
                  }) 
         .fadeIn(8000, function(){
               alert("Крыша вернулась");
               console.log("Крыша вернулась");
                })
         .fadeTo(8000, 0.5, function(){
                alert("Ой, я исчезаааююю...");
              });

 

.slideUp(), .slideDown(), .slideToggle()
уменьшение высоты блока до нуля (display:none), разворачивание блока (убирает display:none), .slideToggle() сам определяет в заисимости от исходного состяния скрывать или показывать блок. Необязательные параметы - длительность анимации и функция обратного вызова. fast (200мс) и slow (600мс)

$("p.foo")
      .slideUp(2000, function(){
             alert("Блок скрыт");
              })
       .slideDown(2000, function(){
             alert("Блок восстановлен");
             })
       .slideToggle("slow", function(){
             alert("Блок снова скрыт");
            });

 

.animate()

 

параметр easing - способ выполнения анимационного перехода. По умолчанию поддерживает "linear" и "swing"
Возможные аргументы:
способ 1 - набор анимируемых элементов в формате JSON + три необязательных - длительность, формула, описывающая функцию изинга и функция обратного вызова
способ 2 - набор css свойств в формате JSON + набор параметров в формате JSON
Пример способ 1

$("#bar")
           .css({
                 "background":"grey",
                 "border":"4px solid lime"
                        })
           .animate({
                "width":"120%",
                "height":"100px"
                      },
                5000,
                "swing",
                function(){
                        alert("И как оно тебе - правда, классно?");
                         });

Пример способ 2

$("#bar")
        .css({
                "background":"blue",
                "border":"3px dotted red"
                  })
         .animate({
                "width":"60%",
                "height":"70px"
                          },
                         {
                  "duration":"6000",
                  "easing":"swing",
                  "complete":function(){
                         console.log("Анимация завершена");
                         }
                      }); 

 

Пример способ 2 с использованием всех доступных возможностей

 

step - запускается после каждого этапа анимации
queue - указывает, должна ли анимация включаться в текущую очередь (следующая анимация начнется только после того как закончится предыдущая)
specialEasing позволяет присоединять к каждому из анимируемых css свойств различные стили изинга

$("#bar")
     .css({
          "background":"yellow",
          "border":"5px solid purple"
            })
   .animate({
           "width":"500px",
           "height":"100px" 
                 },
                 {
           "duration":"9000",
           "easing":"swing",
           "complete":function(){
                    console.log("Анимация завершена")
                 }, 
            "step":function(){
                    console.log("Этап завершен")
                },
            "spеcialEasing":{
            "width":"linear"
               } 
              })
               .queue(function(){
                    console.log( "Animation complete." );
                    $( this ).dequeue(); //это должно быть внутри функции
                     });

 

 

.delay()
Длительность паузы между анимациями

$("#bar")
     .css({
          "background":"olive",
          "border":"5px solid teal",
          "width":"400px"
                })
     .slideUp(1000)
     .delay(6000)
     .slideDown(2000, function(){
                     alert("Готово");
               });

 

 

.stop()
остановка анимации, два булевых параметра - очистка очереди и переход в конец анимации - оба по умолччанию false

var count = 0;
$("#bar")
     .css({
         "background":"yellow",
         "border":"5px solid purple"
            })
     .animate({
          "width":"700px"
           },
          {
         "duration":"6000",
        "step":function(){
                    if (count++==200)
                        {
                          $(this).stop(true,true);
                         }
                     }
             });