Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2015, 16:42
Новичок на форуме
Отправить личное сообщение для onepoint Посмотреть профиль Найти все сообщения от onepoint
 
Регистрация: 04.08.2015
Сообщений: 2

Плавно появляющиеся и исчезающие элементы по событиям 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">&nbsp;</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>


Что подскажите делать в такой ситуации? Как с этим бороться и добиться плавного появления при наведении и хотелось бы и исчезания при покидании элемента курсором, но при этом достоверности обработки этих событий?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
Плавно появляющиеся и исчезающие элементы по событиям mouseover и mouseout. onepoint Events/DOM/Window 0 04.08.2015 16:40
mouseout: Определить дочерние элементы Papa Общие вопросы Javascript 3 03.02.2010 20:29