Плавно появляющиеся и исчезающие элементы по событиям mouseover и mouseout.
Задача:
Есть страница, в середине которой в ряд расположены несколько картинок (абсолютное позиционирование), являющиеся элементами меню. При наведении на любую из них в некотором месте страницы плавно появляется <div> c текстом(названием) этого пункта меню, при уводе курсора из области картинки <div> исчезает вновь. Также при наведении картинка подменяется другой. При щелчке по картинке происходит переход на заданную страницу. Структура документа:
<body >
<div id="all">
<div id="content">
<div id="menu_icon_1" class="name" style="background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:960px;">ТЕКСТ1</div>
<div id="menu_icon_2" class="name" style="background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:800px;">ТЕКСТ2</div>
<div id="menu_icon_3" class="name" style="background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:670px;">ТЕКСТ3</div>
<div id="menu_icon_4" class="name" style="color:#888; background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:540px;">ТЕКСТ4</div>
<div id="menu_icon_5" class="name" style="color:#888; background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:430px;">ТЕКСТ5</div>
<div id="menu_icon_6" class="name" style="color:#888; background-color:white; border-top:0px; text-align:center; font-size:12px; opacity:0; position:absolute; top:370px; left:320px;">ТЕКСТ6</div>
<img src="../img/head.jpg" onmouseenter="show1();" onmouseleave="hide1();" style="position:absolute; top:410px; left:300px; " id="about" onClick="load1();"/>
<img src="../img/soft.jpg" onmouseenter="show2();" onmouseleave="hide2();" style="position:absolute; top:420px; left:417px;" id="soft" onClick="load2();"/>
<img src="../img/antenn.jpg" onmouseenter="show3();" onmouseleave="hide3();" style="position:absolute; top:423px; left:552px;" id="wireless" onClick="load3();"/>
<img src="../img/roboarm.jpg" onmouseenter="show4();" onmouseleave="hide4();" style="position:absolute; top:415px; left:675px;" id="equipment" onClick="load4();"/>
<img src="../img/oil_well.jpg" onmouseenter="show5();" onmouseleave="hide5();" style="position:absolute; top:423px; left:800px;" id="oil" onClick="load5();"/>
<img src="../img/platform.jpg" onmouseenter="show6();" onmouseleave="hide6();" style="position:absolute; top:420px; left:940px;" id="platform" onClick="load6();"/>
<br style="clear:both">
<div id="empty"> </div>
<div id="footer" >
</div>
</div>
</div>
</body>
Функции show1, show2 и т .д. и hide1, hide2, и т.д. вызываемые по событиям onemouseenter и onmouseleave для каждой картинки однотипные и выглядят так:
function show1()
{
var menu1 = $('#menu_icon_1');
show(menu1[0], 10);
document.getElementById("about").src="../img/head.gif";
}
function hide1()
{
var menu1 = $('#menu_icon_1');
hide(menu1[0], 10);
document.getElementById("about").src="../img/head.jpg";
}
Функции show, hide, осуществляющие плавное появление и исчезание:
function show(element, speed){
var ID=setInterval(function(){
if(element.style.opacity>1){
clearInterval(ID);
}
element.style.opacity = +element.style.opacity + 0.08;
}, speed)
}
function hide(element, speed){
var ID=setInterval(function(){
if(element.style.opacity<0){
clearInterval(ID);
}
element.style.opacity = +element.style.opacity - 0.08;
}, speed)
}
Проблема заключается в следующем: при быстром проведении мышью по картинкам меню, блоки с именами начинают появляться, но так и остаются висеть полупрозрачными. Если потом вновь навести указатель мыши на картинку, название либо исчезнет, либо появится до конца. Сначала обрабатывал стандартные события mouseover и mouseout, но картина была такой же. При этом наблюдается интересный момент: события onmouseover и onemouseout срабатывают всегда, это видно т.к. картинка меняется при наведении, и возвращается обратно при уходе с элемента. Но вот исчезают названия не всегда, даже если в hide1() прописывать жесткое menu1.css('opacity', 0), а не плавное исчезание:
function hide1()
{
var menu1 = $('#menu_icon_1');
menu1.css('opacity', 0);
document.getElementById("about").src="../img/head.jpg";
}
К тому же, явно видно, что ф-ия show не успевает отработать до конца, т.к. элементы зависают полупрозрачными, разной степени прозрачности, в зависимости от скорости проведения по элементам мышью. Пробовал бороться с этим недугом принудительным исчезанием всех элементов при переходе на внешний элемент <all>. При обработке события onmouseleave глюк исчезают, но появляется мерцание, например при наведение на картинку название появляется и тут же исчезает, если вывести курсор и вновь навести, появляется нормально. Если обрабатывать onmouseover - глюк остается. Если обрабатывать onmousemove, глюк исчезае, но исчезает и название при движении курсора внутри элемента меню (картинки), т.е. при наведении на картинку название появляется и тут же исчезает, при малейшем движении. <div id="all" onmouseleave="move()" >
<script>
function move() {
var names = $(".name");
names.css('opacity', 0);
}
</script>
Уважаемые форумчане, подскажите новичку, что делать в такой ситуации? Как добиться плавного появления при наведении и хотелось бы и исчезания при покидании элемента курсором, но при этом достоверности обработки этих событий? |
| Часовой пояс GMT +3, время: 04:26. |