Jquery .hover и смена background: почему фон дергается при смене?

Есть див-контейнер #header-slider с установленным background'ом.
Есть li-шки, находящиеся внутри дива-контейнера.

При наведении на li-шки изменяется background дива-контейнера. На данный момент используется такой код:

<script type= "text/javascript">
$(document).ready(function(){
	$('li.slider-submenu-item').hover(
	function(){
		var theId = $(this).attr('id');
		$('#header-slider').attr('style', 'background: url(/img-' + theId+ '.png) no-repeat !important; transition: 1s;');
	},
	function(){
	});
});
</script>

При этом, при перемещении курсора между li-шками фон дива изменяется не всегда плавно (хотя есть transition: 1s;), иногда это происходит резко. С чем это может быть связано? И, возможно, существуют другие, расово верные подходы к решению такого рода задачи?