Последние записи

made in programmersforum 10

Интенсив по 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')
});

Ottava

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;}