«backgroundImageTransition», плавная анимация фоновых изображений

[lampa]

<div id='cont'>
    <div id='opacity'></div>
    <div id='body'></div>
</div>

#body, #opacity  {
    width: 128px;
    height: 128px;
    z-index:2;
    position: relative;
    background: url('http://sverstay-ka.ru/plugins/backgroundImageTransition/style/img/css.png');
}
#opacity {
    position: absolute;
    opacity: 0;
    z-index:3;
    background: url('http://sverstay-ka.ru/plugins/backgroundImageTransition/style/img/css_h.png');
    transition: opacity 0.3s  ;
}
#opacity:hover {
    opacity: 1;    
}

Пример: jsfiddle.net/62cF5/1/
— — библиотека jQuery
— — плагин

У вас при наведении мышки большие картинки начинают «дрыгаться», а спрайты вообще уходят за поля документа.

[Kerny]

Я писал об этом в статье. Читайте внимательнее.

[lampa]

Да, я видел. Как пример привел для сравнения. + баги поправьте.

[Kerny]

Если говорить о сравнениях, то если в вашем примере будет иконка с тенью (с прозрачными элементами), то будет наложение альфа каналов. Насчет багов пожалуйста в личку или в сюда.

[lampa]

Мне ничего не мешает скрывать контейнер #body. Баг репорт сделал.

[Anonym]

Можно даже проще
jsfiddle.net/DbqYw/

[Kerny]

Понятно, что можно сделать и так. Но я преследовал иные цели:

Оставалось выносить иконку в отдельный элемент или создавать псевдоэлемент и анимировать css — свойство opacity. Но это меняло привычный подход к верстке. Хотелось решения, в котором не нужно было бы заботиться об особой структуре html-разметки, а в случае с псевдоэлементами и css-правил. Соответственно, избежать изменений в разметке и правилах в «старых макетах» (сверстанных ранее с использованием «старой» структуры), в которые было решено добавить плавную анимацию.

[Anonym]

Я не понял, что автор имел ввиду под «старой структурой». Для меня, например меню в «старой структуре» выглядит как-то так:

<ul class="menu">
    <li><a href="#">Новости</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">Работы</a></li>
</ul>

Вся «мишура» выносится в CSS. И плавно анимируются иконки или нет, это уже никак не относится к «структуре».

[ishaba]

Меня не покидает ощущение что вы сделали гужевую повозку из автомобиля

[NekR]

Ну куда же без jQuery, конечно.