Как сделать чтобы не дергалось фоновое изображение?

Есть простое меню в виде списка, при наведении на определенный пункт меняется класс, на другой - другой класс заменяется. Все хорошо, но есть один недостаток - дергается изменяемое фоновое изображение. Пробовал предзагрузку фоновых изображений, но это не особо помогло.

HTML код
<div class="house-container">
				<div class="prehouse">
					<span id="model-house" class="house1"></span>
				</div>
				<script>
				$(function(){
					var $menu = $(".menu2-container");
					var $house = $("#model-house");
					$menu.find(".fasad").hover(function(){
						$house.toggleClass("fasad");
					});

					$menu.find(".roof").hover(function(){
						$house.toggleClass("roof");
					});

					$menu.find(".outer").hover(function(){
						$house.toggleClass("house2");
					});

					$menu.find(".walls").hover(function(){
						$house.toggleClass("walls");
					});

					$menu.find(".floor").hover(function(){
						$house.toggleClass("floor");
					});

					$menu.find(".ceiling").hover(function(){
						$house.toggleClass("ceiling");
					});
				});
				</script>
			</div>

Кусок для примера CSS:
.house-container .prehouse .fasad {
		display: inline-block;
		background: url("../img/house/fasad.png") bottom left no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 100%;
		height: 476px;
	}
	.house-container .prehouse .roof {
		display: block;
		background: url("../img/house/roof.png") bottom left no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width: 100%;
		height: 476px; }
  • Вопрос задан
  • 669 просмотров
Решения вопроса 1
Если под "дергается" подразумевается "моргает при смене", то проблема скорее всего в том что картинка выгружается из памяти (скорей всего картинки большого размера).

Решение: либо сделать один спрайт из этих каритнок, либо сделать див, в него через img вставить все ваши картинки, и прятать его (только не с помощью display:none;). Лучше ему задать ширину и высоту 0px и overflow:hidden;
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@vental Автор вопроса
Интересный момент, я был не прав, изображения перестали моргать при смене, но это касается браузеров Оперы и Хрома, а вот Мозилла что-то вредничает по прежнему.
Ответ написан
gluck59
@gluck59
Виртуальный глюк
Сделайте спрайт, там моргать нечему.
Заодно и время загрузки крутой гениальной картинки уменьшите.
Ответ написан
Ваш ответ на вопрос

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

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