События onMouseOver и onMouseOut одновременно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY {
margin: 0px;
}
#y {
background-color: silver;
width: 516px;
height: 666px;
position: absolute;
top: 0px;
z-index: 10;
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var t=1;
var i = 0;
function fade() {
i++;
if (i <= 100) {
setTimeout(fade, t);
document.getElementById('y').innerHTML = "i:"+i+"<br />Прозрачность"+(1-i/100);
}
else i=100
}
function fade_out() {
if (i>0) {
i--;
document.getElementById('y').innerHTML = "rfr<br /><br /><br />i:"+i+"<br />Прозрачность"+(1-(i)/100);
setTimeout(fade_out, t);
}
else i=0;
}
</script>
<div id="y" onMouseOver="fade()" onMouseOut="fade_out()"></div>
</body>
</html>
Данный скрипт работает корректно, только если пройдет полный отсчет от 0 до 100. Почему если отвести курсор допустим, когда значение i будет равно 50, то оно не начнет уменьшатся обратно до 0, т. е. событие omMouseOut не рсаботает (точнее оно срабатывает на долю секунды). Поясните пожалуйста что я делаю не так? |
Цитата:
Цитата:
|
JokerVilli,
таймер останавливай при изменении овер/оут. |
Спасибо за советы! Добавил clearTimeout в обе функции, но почему то это работает только в одной функции, т.е.
function fade() {
//clearTimeout(timer2);
i++;
if (i <= 100) {
timer =setTimeout(fade, t);
document.getElementById('y').style.opacity =1-i/100;
document.getElementById('y').innerHTML = "i:"+i+"<br />Прозрачность"+(1-i/100);
}
else i=100;
}
function fade_out() {
if (i>0) {
clearTimeout(timer);
i--;
document.getElementById('y').style.opacity = 1-(i+1)/100;
document.getElementById('y').innerHTML = "rfr<br /><br /><br />i:"+i+"<br />Прозрачность"+(1-(i)/100);
timer2 = setTimeout(fade_out, t);
else i=0;
}
clearTimeout(timer) срабатывает, а вот если убрать слеши перед clearTimeout(timer2), то это уже не сработает.. Почему? |
причина-таймеры становятся очередь на выполнение -пересмотри логику своего кода.
|
хорошо, если они становятся в очередь, тогда логика мне представляется следующим образом:
происходит выполнение функции на событие1 -> для нее устанавливается свой таймер -> событие1 заканчивается, начинается событие2 -> выпонлянется другая функция, старый таймер отключается, устанавливается новый вроде бы вполне логично, и если затем в этой цепочке поменять местами цифры 1 и 2, все вроде бы должно работать так же.. но яваскрипт так не считает( какова же тогда должна быть логика? |
все, разобрался) нужно было объявить глобально переменные timer и timer2. но теперь проблема другая - я обращаюсь к элементу через id, а что если у меня таких элементов 10 штук и нужно чтобы для каждого выполнялась эта функция? получается у всех элементов будет один класс, но в яваскрипте нет функции getElementByClass..
Как быть в этом случае? |
Есть такая функция в DOM (document.getElementsByClassName). Но не во всех браузерах. Посмотрите здесь, мне кажется это то, что вам понадобится.
P.S. А ещё погуглите querySelector и querySelectorAll. Это ещё менее кроссбраузерно, но зато быстро и приятно. Я использую в расширениях и букмарклетах для Хрома. |
Цитата:
|
Цитата:
Цитата:
http://learn.javascript.ru/searching-elements-dom |
| Часовой пояс GMT +3, время: 09:29. |