Анимированная замена фона

Question

Как анимировать замену фонового изображения?

У меня есть два изображения, works.png и works-hover.png.Первый темный, второй светлый.Хотите заменить темный на светлый при наведении на анимацию, такую ​​как fadeIn / Out.Оба изображения прозрачные png.

Спасибо.

Answer 1

В CSS это очень просто, просто измените фоновое изображение, используя другой класс CSS и jQuery:

.myElement
{
    background-image: url(path/to/flie/works.png);
}

.roll
{
    background-image: url(path/to/flie/works-hover.png);
}

Для затухания используйте jQuery:

$(function() {
    //fade the element, load new bg, bring back the element
    $(".myElement").hover(function() {
        $(this).animate({ 'opacity': 0}, 100), 
            $(this).toggleClass('roll'),
                $(this).animate({'opacity': 1}, 100);
    });
});

Я сделал пример для вас здесь .