Анимация на jQuery

@Bucks · Регистрация: 14.07.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте. Ни кто не мог бы дать пример, как сделать пошаговую анимацию на jQuery из любого кол-ва картинок, чтобы можно было эту анимацию ускорить. За ранее благодарен.

@Dimedrol · 11.08.2010, 22:46

Вы про animate() ?

@outoftime · 11.08.2010, 22:56

Если я верно понял, то ставьте setTimeout(time, myFunc); где time - регулирует время смены кратинок, которе выполняет функция myFunc

@Dimedrol · 11.08.2010, 23:48

Есть такая фича в JQuery, как animate()

JavaScript
1
2
3
$(document).ready(function(){
$('.myimg').animate({height:150},1500);
});

Этот код растянет картинку до 150px за 1,5 сек.

@Bucks · 12.08.2010, 00:23 **[ТС]**

да мне эта фича не нужна.
Я просто не умею на нем писать мб вот так надо мне сделать:ыыы. да даже и не знаю как.
Мне наверно надо без анимейт, просто чтобы через определенное время менялись картинки

@Dimedrol · 12.08.2010, 00:50

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script type="text/javascript">
var i=0;
var timer;
var images=['move_first.gif','move_pred.gif','move_next.gif','move_last.gif'];
function play(){
    timer=setInterval(f,2000);
}
function f(){
    img1.filters[0].Apply();
    img1.src='img/'+images[(i=(i==3?0:i+1))];
    img1.filters[0].Play();
}
</script>
</head>
<body onLoad="play()">
<img id="img1" src="img/move_first.gif"/>
</body>
</html>

Или вот:

HTML5
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<style>
  #slide-container {
     text-align:center;
     margin:20px 0px;
  }
  #slide-container #slideshow {
     width:400;
     height:300px;
     margin:auto;
     position:relative;
  }
  #slide-container #slideshow IMG {
     position:absolute;
     top:0;
     left:0;
  }
</style>
 
<script type="text/javascript">
function animate(tagId,alfa,step){
 div = document.getElementById(tagId);
 var items = new Array();
 //Выбираем все рисунки слайдшоу
 for(c=i=0;i<div.childNodes.length;i++){
  if (div.childNodes[i].tagName=="IMG"){
   items[c] = div.childNodes[i];
   c++;
  }
 }
 last = items[items.length-1];
 next = items[items.length-2];
 //делаем верхний в стопке(текущий) рисунок более прозрачным
 last.style.opacity= alfa/100;
 last.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+alfa+")";
 last.style.filter= "alpha(opacity="+alfa+")";
 
 if ((alfa-step)>0){
  //если еще не достигли полной прозрачности верхнего рисунка - продолжаем анимацию
   setTimeout("animate('"+tagId+"',"+(alfa-step)+","+step+");",50);
 }else{
  //если достигли полной прозрачности верхнего рисунка
  //делаем абсолютно непрозрачным следующий рисунок
  next.style.opacity= 1;
  next.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  next.style.filter= "alpha(opacity=100)";
  // а верхний рисунок перемещаем в низ стопки
  tmp = last;
  div.removeChild(last);
  div.insertBefore(tmp,items[0]);
  tmp.style.opacity= 1;
  tmp.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  tmp.style.filter= "alpha(opacity=100)";
 
  setTimeout( "slideSwitch('"+tagId+"',1000)", 8000 );
 }
}
//эта функция делает видимым блок с рисунками для слайдшоу (изначально он невидим, чтобы избежать мерцания во время загрузки картинок) и запускает анимацию
function slideSwitch(tagId,speed){
 div = document.getElementById('slideshow');
 if (div.style.visibility!="visible"){
      div.style.visibility = "visible";
 }
 items = div.getElementsByTagName('img');
 if (items.length>0){
  animate(tagId,100,10);
 }
}
//выжидаем пару секунд, чтобы картинки успели загрузиться... можно просто поставить на onload-событие последнего из рисунков
setTimeout( "slideSwitch('slideshow',1000);",2000 );
</script>
</head>
<body>
 
<div id="slide-container">
 <div id="slideshow">
  <img src="https://www.cyberforum.ru/javascript/..."/>
  <img src="https://www.cyberforum.ru/javascript/..."/>
  ...
  <img src="https://www.cyberforum.ru/javascript/..."/>
 </div>
</div>
</body>
</html>

@Bucks · 12.08.2010, 01:56 **[ТС]**

Dimedrol, спасибо, очень благодарен. Подошел 1ый скрип, и он оказался простеньким как я и думал.

Добавлено через 12 минут
Только вот есть одна непонятка. Картинки не отображаются, только значок что типа картинка есть, ну видел наверно такой когда-нибудь.

Добавлено через 4 минуты
А, нет, я ошибся, показывает, но не меняет=)

Добавлено через 5 минут
2ой скрип сложный и ... Хотелось бы понять почему 1ый не меняет картинки. В этом скрипте задается переменная I которая равна 0. И после чего я не понимаю вот это img1.src='img/'+images[(i=(i==3?0:i+1))];

Добавлено через 4 минуты
а не могли бы написать простенький скрипт вот такой:
картинка 1 = 100% прозрачности
ждать секунду
картинка 1 = 0% прозрачности
картинка 2 = 100% прозрачности
ждать секунду
картинка 2 = 0% прозрачности
картинка 3 = 100% прозрачности

и чтобы изначально все были прозрачными и в определенном месте страницы

@Dimedrol · 12.08.2010, 02:02

А как насчет jQuery Cycle Plugin?
http://jquery.malsup.com/cycle/

@Bucks · 12.08.2010, 02:54 **[ТС]**

Вот на этой страничке эффект fade, как просмотреть код?

Добавлено через 10 минут
вот вроде этот код анимации fade

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
        $slides.not(':eq('+opts.currSlide+')').css('opacity',0);
        opts.before.push(function(curr,next,opts) {
            $.fn.cycle.commonReset(curr,next,opts);
            opts.cssBefore.opacity = 0;
        });
        opts.animIn    = { opacity: 1 };
        opts.animOut   = { opacity: 0 };
        opts.cssBefore = { top: 0, left: 0 };
    }
};

Но мне надо чтобы картинки не плавно менялись а резко. И мне не понятно как этот скрипт связан с картинками

@Dimedrol · 12.08.2010, 11:54

Вы что-то не то сделали...
Вот так, примерно, должен выглядеть код:

JavaScript
1
2
3
4
5
6
$('#slideshow').cycle({ 
        fx: 'scrollLeft', 
        speed: 300, 
        autostop: 1, 
        autostopCount: 1 
    });

HTML5
1
2
3
4
5
6
7
8
9
#slideshow img { display: none }
#slideshow img.first { display: block }
...
 
<div id="slideshow">
    <img src="image1.jpg" width="200" height="200" class="first" />
    <img src="image2.jpg" width="200" height="200" />
    <img src="image3.jpg" width="200" height="200" />
</div>

@Bucks · 12.08.2010, 13:47 **[ТС]**

Выделил это тегами скрипт

JavaScript
1
2
3
4
5
6
7
8
9
$('#slideshow').cycle({ 
        fx: 'scrollLeft', 
        speed: 300, 
        autostop: 1, 
        autostopCount: 1 
    }); 
 
#slideshow img { display: none }
#slideshow img.first { display: block }

Теперь только картинки расположены друг за другом стоят и все=)

Vovan-VE · 12.08.2010, 13:56

Это скрипт

JavaScript
1
2
3
4
5
6
$('#slideshow').cycle({ 
        fx: 'scrollLeft', 
        speed: 300, 
        autostop: 1, 
        autostopCount: 1 
});

А это стили CSS

CSS
1
2
#slideshow img { display: none }
#slideshow img.first { display: block }

@Bucks · 12.08.2010, 21:27 **[ТС]**

Ага, спс, теперь одна картинка. Только не меняется

Добавлено через 6 часов 29 минут
Вот что у меня в итоге получилось

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery-1.4.2.min.js"> </script>
<link rel="stylesheet" type="text/css" href="1.css">
<script type="text/javascript">
$('#slideshow').cycle({ 
        fx: 'scrollLeft', 
        speed: 300, 
        autostop: 1, 
        autostopCount: 1 
    }); 
</script>
<div id="slideshow">
            <img src="img/1.png" width="140" height="45" class="first" />
            <img src="img/2.png" width="140" height="45" />
            <img src="img/3.png" width="140" height="45" />
            <img src="img/4.png" width="140" height="45" />
            <img src="img/5.png" width="140" height="45" />
            <img src="img/6.png" width="140" height="45" />
            <img src="img/7.png" width="140" height="45" />
            <img src="img/8.png" width="140" height="45" />
            <img src="img/9.png" width="140" height="45" />
            <img src="img/10.png" width="140" height="45" />
</div>
</html>

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Bucks 9 / 4 / 1 Регистрация: 14.07.2010 Сообщений: 150

	Анимация на jQuery 11.08.2010, 21:55. Показов 3762. Ответов 12 Метки нет (Все метки) Здравствуйте. Ни кто не мог бы дать пример, как сделать пошаговую анимацию на jQuery из любого кол-ва картинок, чтобы можно было эту анимацию ускорить. За ранее благодарен. 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	11.08.2010, 22:46
	Вы про animate() ? 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	11.08.2010, 22:56
	Если я верно понял, то ставьте setTimeout(time, myFunc); где time - регулирует время смены кратинок, которе выполняет функция myFunc 0

@Bucks 9 / 4 / 1 Регистрация: 14.07.2010 Сообщений: 150
	12.08.2010, 00:23 [ТС]
	да мне эта фича не нужна. Я просто не умею на нем писать мб вот так надо мне сделать:ыыы. да даже и не знаю как. Мне наверно надо без анимейт, просто чтобы через определенное время менялись картинки 0

@Bucks 9 / 4 / 1 Регистрация: 14.07.2010 Сообщений: 150
	12.08.2010, 01:56 [ТС]
	Dimedrol, спасибо, очень благодарен. Подошел 1ый скрип, и он оказался простеньким как я и думал. Добавлено через 12 минут Только вот есть одна непонятка. Картинки не отображаются, только значок что типа картинка есть, ну видел наверно такой когда-нибудь. Добавлено через 4 минуты А, нет, я ошибся, показывает, но не меняет=) Добавлено через 5 минут 2ой скрип сложный и ... Хотелось бы понять почему 1ый не меняет картинки. В этом скрипте задается переменная I которая равна 0. И после чего я не понимаю вот это img1.src='img/'+images[(i=(i==3?0:i+1))]; Добавлено через 4 минуты а не могли бы написать простенький скрипт вот такой: картинка 1 = 100% прозрачности ждать секунду картинка 1 = 0% прозрачности картинка 2 = 100% прозрачности ждать секунду картинка 2 = 0% прозрачности картинка 3 = 100% прозрачности и чтобы изначально все были прозрачными и в определенном месте страницы 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	12.08.2010, 02:02
	А как насчет jQuery Cycle Plugin? http://jquery.malsup.com/cycle/ 0