Всем привет. Возникла такая
ситуация: есть скрипт, который позволяет при наведении на один блок скрывать другой и наоборот (если убрать мышку с области, в которой расположен первый блок, появляется другой блок) Всё бы хорошо, код работает, все появляется, НО!
Проблема: бывает так, что блоки не сразу появляются и исчезают. Допустим если быстро провести мышкой по области несколько раз, то он начинает моргать или может вообще не появится. Как избавится от этого глюка???
Сайт, на котором можно наглядно посмотреть действие скрипта: msys. by (без пробела).
Если на этом форуме запрещены ссылки, то прошу модеров не банить, а просто затереть сайт.
Скрипт:
$(document).ready(function(){
$(".cc_item1").mouseover(function() {
$(".cc_title1").animate({ opacity: "0" }, 700);
});
$(".cc_item1").mouseleave(function() {
$(".cc_title1").stop().animate({ opacity: "1" }, 200);
});
$(".cc_item2").mouseover(function() {
$(".cc_title2").animate({ opacity: "0" }, 200);
});
$(".cc_item2").mouseleave(function() {
$(".cc_title2").stop().animate({ opacity: "1" }, 200);
});
$(".cc_item3").mouseover(function() {
$(".cc_title3").animate({ opacity: "0" }, 200);
});
$(".cc_item3").mouseleave(function() {
$(".cc_title3").stop().animate({ opacity: "1" }, 200);
});
$(".cc_item4").mouseover(function() {
$(".cc_title4").animate({ opacity: "0" }, 200);
});
$(".cc_item4").mouseleave(function() {
$(".cc_title4").stop().animate({ opacity: "1" }, 200);
});
$(".cc_item5").mouseover(function() {
$(".cc_title5").animate({ opacity: "0" }, 200);
});
$(".cc_item5").mouseleave(function() {
$(".cc_title5").stop().animate({ opacity: "1" }, 200);
});
});
Файл index.php
<div id="cc_menu" class="cc_menu">
<div class="cc_item1" style="z-index:30;">
<span class="cc_title1">Разработка WEB-сайтов</span>
<div class="cc_submenu">
<ul>
<p><a href="razrabotka-web-sajtov-opisanie">Описание услуги</a></p>
<p><a href="razrabotka-web-sajtov-stoimost">Тарифные планы и их стоимость</a></p>
<p><a href="razrabotka-web-sajtov-bitriks">Система управления 1-С Битрикс</a></p>
<p><a href="razrabotka-web-sajtov-primechanie">Примечания</a></p>
</ul>
</div>
</div>
<div class="cc_item2" style="z-index:30;">
<span class="cc_title2">Продвижение WEB-сайтов</span>
<div class="cc_submenu">
<ul >
<p><a href="prodvizhenie-web-sajtov-stoimost">Тарифные планы и их стоимость</a></p>
<p><a href="prodvizhenie-web-sajtov-primechanie">Примечания</a></p>
</ul>
</div>
</div>
<div class="cc_item3" style="z-index:30;">
<span class="cc_title3">Обслуживание WEB-сайтов</span>
<div class="cc_submenu">
<ul>
<p><a href="obsluzhivanie-web-sajtov-stoimost">Описание услуги и их стоимость</a></p>
<p><a href="obsluzhivanie-web-sajtov-primechanie">Примечания</a></p>
</ul>
</div>
</div>
<div class="cc_item4" style="z-index:30;">
<span class="cc_title4">Обслуживание компьтеров</span>
<div class="cc_submenu">
<ul >
<p><a href="opisanie-pk">Описание услуги</a></p>
<p><a href="osnovnye-uslugi-pk">Основой комплекс услуг</a></p>
<p><a href="dopolnitelnye-uslugi-pk">Дополнительный комплекс услуг</a></p>
</ul>
</div>
</div>
<div class="cc_item5" style="z-index:30;">
<span class="cc_title5">Мотаж и обслуживание сетей связи</span>
<div class="cc_submenu">
<ul >
<p><a href="seti-opisanie">Описание услуги</a></p>
<p><a href="seti-stoimost">Стоимость услуги</a></p>
</ul>
</div>
</div>
</div>
И ещё один вопрос: Допустим у нас на странице расположено много блоков с одним классом. Как сделать так, чтобы при выполнении какого-то действия над блоком с определенным class или id оно выполнялось только для одного блока, а не для всех сразу?
Как пример, нужно чтобы при наведении на один из множества блоков с одним классом исчезал только тот блок, на который навели, а не все сразу.