Как сделать плавную смену фона при наведении на иконки?

Question

[WebforSelf]

Друзья, есть 6 иконок(блоки div) обернутых в общий фон.
Требовалсь сделать чтоб при наведении на один из 6 блоков менялся фон на соответствующий.
Ниже код который написал, но при быстром наведении на иконки свойство transition не работает, картинки резко меняются. Если подождать пока пройдет 1 секунда то нормально. Как исправить данный баг?

$('.bg1').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/1.jpg) top center / cover no-repeat',
			'transition' : 'background 1s ease'
    });
});

	$('.bg2').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/2.jpg) top center / cover no-repeat',
			'transition' : 'background 1s ease'
    });
});
	$('.bg3').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/3.jpg) top center  / cover no-repeat',
		'transition' : 'background 1s ease'
    });
});

	$('.bg4').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/4.jpg) top center  / cover no-repeat',
		'transition' : 'background 1s ease'
    });
});

	$('.bg5').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/5.jpg) top center  / cover no-repeat',
		'transition' : 'background 1s ease'
    });
});

	$('.bg6').hover(function() {
    $('.bg_banner').css({
        'background' : 'url(files/banner-head/6.jpg) top center  / cover no-repeat',
		'transition' : 'background 1s ease'
    });
});

Comments

[WebforSelf]

Алексей Глинский, тоже самое...

Answer 1

[deeppines]

Свойство transition работает только с числовыми параметрами, картинка не является числовым параметром, а скорее булевым, соответственно анимировать ее изменение подменой картинки нельзя.

А вот менять прозрачность плавно можно. Ну и прописано оно должно быть только у элемента, а на ховере меняется только параметр который необходимо анимировать.