Как сделать плавное появление нового кадра?

Question

[Роман Денискин]

Приветствую друзья. Очень нужна ваша помощь в таком вопросе. Добавляю CSS свойство transition: all 1000ms ease; классу "active" через jquery. Класс "active" присваивается активному в данный момент кадру, но появляется он так же резко как и без него. Почему этот метод не работает? Как сделать плавное исчезновение старого кадра и появление нового из прозрачного фона со скоростью 1 сек?
Вот сам скрипт с которым я работаю: . Нажимая на стрелки меняется кадр.

Answer 1

[Scribblex]

Привет! transition не работает со свойством display, используйте opacity. Свойство transition должно быть определено сразу, а не вешаться / сниматься динамически
.slider-item {
opacity: 0;
vertical-align: middle;
transition: all 1000ms ease;
width: 100%;
}

.slider-item.active {
opacity: 1;
}

Comments

[Роман Денискин]

Применил, всё равно не работает... Что я сделал не так? blog.find-out.org/test

[Scribblex]

Вы НЕ применили то, что я описал. Или не загрузили. Правила для класса .slider-item старые, на активное изображение все еще инлайнов навешивается transition

[Роман Денискин]

Scribblex:
.slider-item.active {
opacity: 1;
}
Как я понимаю этот стиль нужно применять динамически в jquery? Вот что я сделал на данный момент. В css правилах я добавил ваши правила для класса .slider-item
Для класса .active я применяю свойство opacity: 1; подставляемое jquery автоматически нажимая на кнопку смены кадра. Ничего не заработало, хотя я вижу в инспекторе элементов ваши правила. Я думаю, что я что то сделал не так...

[Scribblex]

Нет, динамически нужно вешать класс .active; У меня в профиле email висит. Напишите мне письмо, чувствую, надо показать решение, а потом объяснить, что да как