Форум

JokerVilli · #1 (**permalink**) 11.01.2012, 16:38

<!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 не рсаботает (точнее оно срабатывает на долю секунды). Поясните пожалуйста что я делаю не так?

nerv_ · #2 (**permalink**) 11.01.2012, 17:24

Сообщение от JokerVilli

События onMouseOver и onMouseOut одновременно

Такое возможно только в IE

(шутка)

Сообщение от JokerVilli

Почему если отвести курсор допустим, когда значение i будет равно 50, то оно не начнет уменьшатся обратно до 0, т. е. событие omMouseOut не рсаботает

Значит, это не предусмотрено программой. Может это пригодится.

dmitriymar · #3 (**permalink**) 11.01.2012, 18:35

JokerVilli,
таймер останавливай при изменении овер/оут.

JokerVilli · #4 (**permalink**) 12.01.2012, 15:17

Спасибо за советы! Добавил 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), то это уже не сработает.. Почему?

dmitriymar · #5 (**permalink**) 12.01.2012, 16:06

причина-таймеры становятся очередь на выполнение -пересмотри логику своего кода.

JokerVilli · #6 (**permalink**) 12.01.2012, 16:29

хорошо, если они становятся в очередь, тогда логика мне представляется следующим образом:

происходит выполнение функции на событие1 -> для нее устанавливается свой таймер -> событие1 заканчивается, начинается событие2 -> выпонлянется другая функция, старый таймер отключается, устанавливается новый

вроде бы вполне логично, и если затем в этой цепочке поменять местами цифры 1 и 2, все вроде бы должно работать так же.. но яваскрипт так не считает(

какова же тогда должна быть логика?

JokerVilli · #7 (**permalink**) 13.01.2012, 11:11

все, разобрался) нужно было объявить глобально переменные timer и timer2. но теперь проблема другая - я обращаюсь к элементу через id, а что если у меня таких элементов 10 штук и нужно чтобы для каждого выполнялась эта функция? получается у всех элементов будет один класс, но в яваскрипте нет функции getElementByClass..

Как быть в этом случае?

GuardCat · #8 (**permalink**) 13.01.2012, 14:36

Есть такая функция в DOM (document.getElementsByClassName). Но не во всех браузерах. Посмотрите здесь, мне кажется это то, что вам понадобится.

P.S. А ещё погуглите querySelector и querySelectorAll. Это ещё менее кроссбраузерно, но зато быстро и приятно. Я использую в расширениях и букмарклетах для Хрома.

nerv_ · #9 (**permalink**) 13.01.2012, 15:04

Сообщение от JokerVilli

я обращаюсь к элементу через id, а что если у меня таких элементов 10 штук

еще может пригодиться getElementsByTagName

Seva1986 · #10 (**permalink**) 15.01.2012, 02:07

Сообщение от GuardCat

P.S. А ещё погуглите querySelector и querySelectorAll. Это ещё менее кроссбраузерно

какраз наоборот getElementsByClassName не работает в 8 осле а querySelector и querySelectorAll там работают, но есть одно но, они создают статический масив, а getElement... динамические, тоесть если скрптом добавить новые эелементы getElement... сам обновиться, а querySelectorAll нужно переинициализировать.

Сообщение от JokerVilli

Как быть в этом случае?

думаю ту есть чтото полезное для вас

http://learn.javascript.ru/searching-elements-dom

Форум

Справочник

Discord чат

Курсы javascript