animate

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

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

animate( параметры, [duration], [easing], [вызов] )

Данная функция предназначена для создания пользовательской анимации.
Ключевым аспектом данной функции является объект свойств стиля, который будет анимирован. Каждый ключ в рамках объекта представляет собой свойство стиля, которое также будет анимированно (например, «height», «top» или «opacity»).

Кроме того, свойства должны быть указаны с использованием camel case (т.е., например, нужно писать  marginLeft вместо margin-left).

Значение, связанное с ключом, показывает конец процесса анимирования свойства. Если указано число в качестве значения, тогда соответствующее свойство стиля перейдет из текущего состояния в новое. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и  «toggle»). Например, backgroundColor не поддерживается.

Начиная с jQuery 1.2 можно указывать значения свойств используя em и % (где есть такая возможность). Кроме того, в jQuery 1.2 можно делать «относительную» анимацию, т.е. указывать значения соответствующего свойства относительно его текущей позиции (используя «+=» или же «-=»), чтобы двигать элемент в положительную либо отрицательную стороны.

Начиная с jQuery 1.3, если указывается нулевая продолжительность анимации, то все элементы, задействованные в процессе анимации, синхронно перейдут в свое конечное состояние (в отличие от старых версий, где данная операция производилась асинхронно).

Аргументы:

параметры Опции
Набор атрибутов стиля CSS, которые вы хотите задействовать в анимации, и их конечные значения.
duration (необязательно) Строка, Число
Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000).
easing (необязательно) Строка
Имя эффекта ослабления, который вы хотите использовать (обязательно наличие соответствующего дополнения). Существуют два встроенных значения: «linear» и «swing».
вызов (необязательно) Функция
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.
Примеры:

Нажмите на кнопку для запуска анимации элемента div с набором различных свойств.
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"

      }, 1500 );
    });
<!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(){

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"

      }, 1500 );
    });

  });
  </script>
  <style>
  div {
    background-color:#bca;
    width:100px;
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>

  <div id="block">Hello!</div>
</body>
</html>
Пример «относительной» анимации. При нажатии на кнопки элементы div двигаются в соответствующие стороны.
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "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(){

    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });

  });
  </script>

  <style>
  div {
    position:absolute;
    background-color:#abc;
    left:50px;
    width:90px;
    height:90px;
    margin:5px;
  }
  </style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>

<div class="block"></div>

</body>
</html>
Анимация представляет собой переключение свойств высоты и видимости всех параграфов, длительность анимации — 600 миллисекунд.
$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");
Анимация представляет собой установка свойства left в 50 и свойства opacity в 1 (полностью видимый), длительность анимации — 500 миллисекунд.
$("p").animate({
      "left": "50", "opacity": 1
    }, 500);
Пример использования функции ослабления для получения иного стиля анимации. Данный метод будет работать только при наличии соответствующего дополнения.
$("p").animate({
      "opacity": "show"

    }, "slow", "easein");
Name Type

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

animate( параметры, опции )

Данная функция предназначена для создания пользовательской анимации.
Ключевым аспектом данной функции является объект свойств стиля, который будет анимирован. Каждый ключ в рамках объекта представляет собой свойство стиля, которое также будет анимированно (например, «height», «top» или «opacity»).

Кроме того, свойства должны быть указаны с использованием camel case (т.е., например, нужно писать  marginLeft вместо margin-left).

Значение, связанное с ключом, показывает конец процесса анимирования свойства. Если указано число в качестве значения, тогда соответствующее свойство стиля перейдет из текущего состояния в новое. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и  «toggle»). Например, backgroundColor не поддерживается.

Аргументы:

параметры Опции
Набор атрибутов стиля CSS, которые вы хотите задействовать в анимации, и их конечные значения.
опции Опции
Набор опций для конфигурации анимации.
Опции:
Имя Тип
duration Строка, Число По умолчанию: «normal»
Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000).
easing Строка По умолчанию: «swing»
Имя эффекта ослабления, который вы хотите использовать (обязательно наличие соответствующего дополнения). Существуют два встроенных значения: «linear» и «swing».
complete Функция
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.
step Вызов
queue Логическое значение По умолчанию: true
Установка данного значения в false даст возможность выполнить анимационный эффект немедленно, вне очереди, параллельно со следующим эффектом. (Добавлено в jQuery 1.2)
Примеры:
Первая кнопка показывает пример параллельной анимации. Происходит расширение элемента div до 90% от возможной ширины и при этом увеличивается текст. Как только оканчивается увеличение текста, начинается заливка кусочка границы.

Вторая кнопка показывает традиционную анимацию с наличием очереди эффектов, где каждый следующий эффект начинается после окончания предыдущего.

    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });
<!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(){

    $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });

    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });

    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

  });
  </script>

  <style>div {
    background-color:#bca;
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
  </style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
  <button id="go2">» Animate Block2</button>

  <button id="go3">» Animate Both</button>
  <button id="go4">» Reset</button>
  <div id="block1">Block1</div>

  <div id="block2">Block2</div>
</body>
</html>
Анимация представляет собой переключение свойств высоты и видимости всех параграфов, длительность анимации — 600 миллисекунд.
$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });
Анимация представляет собой установка свойства left в 50 и свойства opacity в 1 (полностью видимый), длительность анимации — 500 миллисекунд. В данном примере анимация без очереди эффектов, т.е. эффекты выполняются параллельно.
$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });
Пример использования функции ослабления для получения иного стиля анимации. Данный метод будет работать только при наличии соответствующего дополнения.
$("p").animate({
      "opacity": "show"

    }, { "duration": "slow", "easing": "easein" });
Пример использования функции. Первым аргументом является массив CSS свойств, вторым — продолжительность анимации, третим — тип ослабления и четвертым — безымянная функция.
$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );
Name Type