vyshkant
@vyshkant
developer

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;), иногда это происходит резко. С чем это может быть связано? И, возможно, существуют другие, расово верные подходы к решению такого рода задачи?
  • Вопрос задан
  • 3835 просмотров
Решения вопроса 1
vyshkant
@vyshkant Автор вопроса
developer
Вопрос решен не был, оставили как есть из-за несистемности появления проблемы.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
То что у li-шек div родитель - уже странно как минимум, ибо должен быть ul. Ну и второе - дёргается потому что картинки не подгружены. Используйте прелоудер, чтобы загрузить все фоны, а потом уже показывайте контент.
Ответ написан
kudlayko
@kudlayko
Использовать один спрайт, и менять background-position
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы