Анимация исчезновения изображений

@gladooo · Регистрация: 25.05.2013

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

Нужно чтобы плавно появлялось изображение, исчезало, появлялось другое. Таких около 50. И на каждое разные ссылки. Как лучше реализовать?

@Thisman · 07.08.2014, 21:53

gladooo, через слайдер. И автопереходы

http://yeap.narod.ru/js/playground/021/slidejs/ например это, или вот тут целый 30 вариантов, http://yeap.narod.ru/js/022.html

@vovandr · 07.08.2014, 21:59

С помощью jquery если устроит:

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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
 
<div class="rel_block_banner">
    <div class="abs_block_banner"><img src="1.jpg" alt=""></div>
    <div class="abs_block_banner"><img src="2.jpg" alt=""></div>
    <div class="abs_block_banner"><img src="3.jpg" alt=""></div>   
</div>
<style>
    .rel_block_banner{position: relative;}
 .abs_block_banner{position: absolute;top:0;left: 0;}
 
</style>
 
<script>
    function cycleSlider(){
 
     var imagesHolder = $('.abs_block_banner'),
         imagesHolderLength = imagesHolder.length,
         i = 0;
 
         // устанавливаем начальный порядок
         imagesHolder.each(function(z){
            $(this).css('z-index', -z);
         });
 
         var initSlider = function() {
 
            if(i == imagesHolderLength) i = 0;
 
            imagesHolder.eq(i).fadeOut(300, function(){
               imagesHolder.each(function(j){
                   $(this).css('z-index', (((imagesHolderLength - j)) + i) %  imagesHolderLength);
               });
                i++;
                $(this).show();
            });
         }
 
         setInterval(initSlider, 1000);
 
   }
 
   cycleSlider();     
 
</script>
</body>
</html>

@gladooo · 12.03.2015, 17:11 **[ТС]**

Все круто, но есть пример реализации на нативном js?

@kalabuni · 12.03.2015, 18:56

заполните пропуски в тексте, тогда поможем

текущая картинка начинает увеличивать свою прозрачность от 0% в момент времени 0мс и до ...% в момент времени ...мс и становится полностью прозрачной (100%) в момент времени ...мс

следующая картинка появляется на том же месте поверх текущей в момент времени ...мс, имея начальную прозрачность ...% и её прозрачность начинает уменьшаться, достигая 0% в момент времени ...мс

@gladooo · 12.03.2015, 20:03 **[ТС]**

Сообщение от kalabuni

текущая картинка начинает увеличивать свою прозрачность от 0% в момент времени 0мс и до 0% в момент времени 3000мс и становится полностью прозрачной (100%) в момент времени 6000мс
следующая картинка появляется на том же месте поверх текущей в момент времени 9000мс, имея начальную прозрачность 0% и её прозрачность начинает уменьшаться, достигая 100% в момент времени 15000мс

Расставил, но кажется не совсем верно понял.
Картинка вначале есть, так держится три секунды, затем начинает потухаеть за 3с, на ее месте появляется другая, доходит до 0% прозраности за 3 секунды, держится 3с, и так по кругу
Их много, и как сделать, что они все подгрузились вначале загрузки страницы?

@kalabuni · 12.03.2015, 21:11

Сообщение от gladooo

кажется не совсем верно понял

это точно

перечитайте второй абзац с вашими вставками "имея начальную прозрачность 0% и её прозрачность начинает уменьшаться, достигая 100%"

уменьшение от нуля - это -1, -2, -3... спрашиваю вас: как, переходя в отрицательную область и продолжая уменьшение, можно достичь +100?

объясняю суть:
если текущая картинка будет потихоньку бледнеть до момента полной её невидимости и в этот самый момент ВМЕСТО текущей картинки появится следующая, изначально невидимая, которая начнёт потихоньку проявляться, то визуально это будет выглядеть как смена картинок через какую-то паузу, потому что картинку с прозрачностью 85-99% фактически уже совсем не видно (сначала текущую не будет видно какое-то время, а потом следующую картинку тоже точно такое же время не будет видно)

избавиться от этой явно видимой "паузы" можно двумя способами
-- первый способ, простейший: не доводить прозрачность текущей картинки до 100%, ограничиться прозрачностью ~85%
и в этот момент вместо текущей поместить следующую, которая тоже изначально будет иметь прозрачность ~85%

-- второй способ, посложнее: когда текущая картинка сильно-сильно побледнеет, но ещё будет видна, поверх неё (НЕ вместо текущей, а именно ПОВЕРХ неё) поместить следующую картинку со 100% прозрачностью и какое-то время будет меняться прозрачность обеих картинок одновременно - текущая будет бледнеть до невидимости, а следующая - проявляться как бы из текущей

вот я и хотел выяснить ваши предпочтения - %% прозрачности, конечные и начальные, и моменты времени, когда надо заменять текущую (или накладывать на неё) следующую картинку

Сообщение от gladooo

Их много, и как сделать, что они все подгрузились вначале загрузки страницы?

зачем "все вначале"? это нерационально
вначале вам нужны только первая и вторая картинки, а третью и последующие можно и нужно предзагружать пока демонстрируются предыдущие

@EPMAK · 13.03.2015, 15:31

Не по теме:

Николай, ваша лекция про инкапсуляцию велосипедов уложится в одим метод jQuery .fadeToggle()

@kalabuni · 13.03.2015, 15:49

EPMAK, вам очередная саечка за невнимательность

читаем просьбу ТС --

Сообщение от gladooo

Все круто, но есть пример реализации на нативном js?

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@gladooo 1 / 1 / 0 Регистрация: 25.05.2013 Сообщений: 73

	Анимация исчезновения изображений 07.08.2014, 21:28. Показов 3748. Ответов 8 Метки нет (Все метки) Нужно чтобы плавно появлялось изображение, исчезало, появлялось другое. Таких около 50. И на каждое разные ссылки. Как лучше реализовать? 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	07.08.2014, 21:53
	gladooo, через слайдер. И автопереходы http://yeap.narod.ru/js/playground/021/slidejs/ например это, или вот тут целый 30 вариантов, http://yeap.narod.ru/js/022.html 0

@gladooo 1 / 1 / 0 Регистрация: 25.05.2013 Сообщений: 73
	12.03.2015, 17:11 [ТС]
	Все круто, но есть пример реализации на нативном js? 0

@EPMAK
	13.03.2015, 15:31
	Не по теме: Николай, ваша лекция про инкапсуляцию велосипедов уложится в одим метод jQuery .fadeToggle() 0

Анимация исчезновения изображений

Решение