Есть простое меню в виде списка, при наведении на определенный пункт меняется класс, на другой - другой класс заменяется. Все хорошо, но есть один недостаток - дергается изменяемое фоновое изображение. Пробовал предзагрузку фоновых изображений, но это не особо помогло.
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; }
Простой