Примеры для jQuery .animate()

> > > > Примеры

Нажмите на кнопку для запуска анимации DIV элемента по нескольким различным свойствам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">&raquo; Запустить</button>
<div id="block">Hello!</div>
 
<script>
// 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>
 
</body>
</html>

Демонстрация:

Анимирует свойство left DIV элемента с относительным значением. Нажмите несколько раз на кнопки, чтобы увидеть относительные анимации в очереди.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block"></div>
 
<script>
$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
 
</body>
</html>

Демонстрация:

Первая кнопка показывает как работает анимация без очереди выполения анимации. Она расширяет DIV элемент до 90% ширины в то время как размер шрифта увеличивается. После того как изменение шрифта будет завершено, начнется анимация заливки границ элемента. Вторая кнопка запускает традиционную анимацию, когда каждая анимация будет запущена только если предыдущая анимация завершена.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <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>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go1">&raquo; Анимировать Блок 1</button>
<button id="go2">&raquo; Анимировать Блок 2</button>
<button id="go3">&raquo; Анимировать оба</button>
<button id="go4">&raquo; Сбросить</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
 
<script>
$( "#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>
 
</body>
</html>

Демонстрация:

Анимация свойства left первого DIV элемента и синхронизация обоих DIV элементов, при помощи step функции, устанавливающих их свойств left на каждом шаге анимации.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p><button id="go">Запустить »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
 
<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>
 
</body>
</html>

Демонстрация:

Анимирует все параграфы переключая (toggle) сразу высоту и прозрачность, с длительностью анимации 600 милисекунд.

1
2
3
4
 
$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, "slow" );

Анимирует все параграфы - свойство left до значения 50 и прозрачность до 1 (непрозрачный, видимый), анимация будет выполнена за 500 милисекунд.

1
2
3
4
 
$( "p" ).animate({
  left: 50,
  opacity: 1
}, 500 );

Анимирует свойства left и opacity всех параграфов; запускает анимацию вне очереди, т.е. каждая анимация будет запускаться автоматически не дожидаясь своей очереди.

1
2
3
4
5
6
7
 
$( "p" ).animate({
  left: "50px",
  opacity: 1
}, {
  duration: 500,
  queue: false
});

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

1
2
3
 
$( "p" ).animate({
  opacity: "show"
}, "slow", "easein" );

Анимирует все параграфы переключением (toggle) сразу свойств height и opacity, с длительностью анимации 600 милисекунд.

1
2
3
4
5
6
 
$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, {
  duration: "slow"
});

Используйте easing функция для получения различных видов анимаций. Это будет работать только если будет подключен плагин предоставляющий соотвествующую easing функцию.

1
2
3
4
5
6
 
$( "p" ).animate({
  opacity: "show"
}, {
  duration: "slow",
  easing: "easein"
});

Анимирует все параграфы и выполняет функцию обратного вызова после того как анимация будет завершена. Первый аргумент это объект CSS свойства, второй указывает что анимация должна завершиться через 1000 милисекунд, третие аргумент - тип easing и четвертый аргумент анонимная функция обратного вызова.

1
2
3
4
5
6
7
 
$( "p" ).animate({
  height: 200,
  width: 400,
  opacity: 0.5
}, 1000, "linear", function() {
  alert( "all done" );
});