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

Question

[Anton Dyshkant]

Есть див-контейнер #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;), иногда это происходит резко. С чем это может быть связано? И, возможно, существуют другие, расово верные подходы к решению такого рода задачи?

Answer 1

[Anton Dyshkant]

Вопрос решен не был, оставили как есть из-за несистемности появления проблемы.

Answer 2

[Виталий Киренков]

То что у li-шек div родитель - уже странно как минимум, ибо должен быть ul. Ну и второе - дёргается потому что картинки не подгружены. Используйте прелоудер, чтобы загрузить все фоны, а потом уже показывайте контент.

Comments

[Anton Dyshkant]

@DeLaVega ну у li-шек непосредственным родителем является ul, конечно.
Что касается изображений: если выполнять те же действия с теми же лишками снова и снова - дергание продолжается. т.е. картинки уже явно есть в кэше.
О прелоадере применительно к моему случаю, можно подробнее, пожалуйста?

[Виталий Киренков]

lmgtfy.com/?q=%D0%BF%D1%80%D0%B5%D0%BB%D0%BE%D0%B0...

jquerylist.ru/snippets/image-preloader.html

[Anton Dyshkant]

@DeLaVega увы, дело вовсе не в прелоаде: с ним ситуация не изменилась

[Виталий Киренков]

Дайте ссылку посмотреть.

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

[Anton Dyshkant]

@DeLaVega сайт пока на локалке, нет возможности дать посмотреть. возможно, такая возможность появится на днях

Answer 3

[kudlayko]

Использовать один спрайт, и менять background-position