Здравствуйте!
Есть примерно такой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
.hide-blocks-facty li {
display: none;
list-style: none;
border: 2px solid #b463b2;
padding-top: 10px;
font-size: 13px;
}
</style>
</head>
<body>
<div id="facty">
<ul class="blockfactywithimage">
<li>Впечатляющий стаж работы</li>
<li>Эксклюзивный дизайн</li>
<li>Гарантии качества</li>
<li>Собственное производство</li>
<li>Оперативная работа онлайн</li>
<li>Выезд к клиенту</li>
<li>Изделия под ключь</li>
</ul>
<div class="hide-blocks-facty">
<ul class="margintop0" style="width: 1173px;">
<li><p>Более 11 лет мы работаем с клиентами в текстильной индустрии, каждый год подтверждая свой профессионализм.</p></li>
<li><p>С вами работает персональный дизайнер, индивидуально разрабатывая модели только под ваш интерьер.</p></li>
<li><p>Размещая заказ у нас, вы получаете комплект официальных документов, являющихся для вас юридической гарантией качества нашей работы.</p></li>
<li><p>Каждое изделие изготавливается по индивидуальному лекалу по европейским стандартам, под тщательным руководством опытного технолога.</p></li>
<li><p>Мы экономим ваше время! Принимайте решения, согласовывайте дизайн штор и текстиль в онлайн-режиме не отрываясь от своих дел.</p></li>
<li><p>Мы заботимся о вашем комфорте, поэтому наши специалисты приедут к вам на встречу в любую точку Москвы и Московской области.</p></li>
<li><p>Мы оказываем комплексное текстильное оформление, начиная от замера и заканчивая установкой готовых изделий.</p></li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$("#facty .blockfactywithimage li:nth-child(1)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(1)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(2)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(2)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(3)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(3)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(4)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(4)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(5)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(5)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(6)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(6)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$("#facty .blockfactywithimage li:nth-child(7)").hover(function() {
activeTHis(this);
$(".hide-blocks-facty li:nth-child(7)").fadeIn();
$(this)
.closest("ul")
.find("li")
.hasClass("activex");
});
$(".hide-blocks-facty ul").css("width", $(".blockfactywithimage").width());
}); //ready
function activeTHis(a) {
$("#facty .blockfactywithimage li").removeClass("activex");
$(a).addClass("activex");
$(".hide-blocks-facty li").hide();
}
</script>
</body>
</html>
Т.е. при наведении на элемент списка, внизу должно появляться его описание, соответсвенно когда убираем мышку - описание должно пропадать.
Проблема в том, что если двигаем мышку быстро, то появляется сразу несколько описаний снизу. Как это можно поправить?