
Последние записи
- Как передать значение во внешний JS-скрипт?
- Определить количество знаков после запятой
- TWebBrowser, как сделать чтобы новые ссылки открывал в TabSheet
- Как узнать частоту звука
- Сравнение файлов в Excel
- Как на JS и PHP сделать страницу с переключением активных вкладок
- gimp скрипт Script-Fu для уменьшения размера, сжатия изображений в linux в командной строке через терминал на Ubuntu
- Кнопка «Отмена» в HTML-форме
- SQLite сохранить базу в файл (C/C++ Базы данных)
- Дата по Гринвичу в JavaScript

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
25th
Сен
Плавный переход на jQuery
Posted by obzor under JavaScript
При наведении на объект меняется его бэкграунд. это происходит резко. Нужно сделать этот переход плавным.
$(document).on('mouseover', '.nav-menu .nav-column', function(){
$(this).addClass('active').siblings().removeClass('active')
});
CSS transition криво работает для свойства background-image: при MouseOut в Хроме переход происходит скачком, в FF плавно не происходит вообще. Тогда как для background-color и opacity всё работает отлично (кроме IE младше 10). Можно протестировать в различных браузерах на этой demo.
Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена.
Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую:
HTML
<div id="cf">
<img class="bottom" src="/images/img.jpg" />
<img class="top" src="/images/img2.jpg" />
</div>
CSS:
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover { opacity:0;}
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту

пеллетные котлы

Пеллетный котел Emtas

Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)