Показать сообщение отдельно
  #1 (permalink)  
Старый 12.01.2011, 15:06
Новичок на форуме
Отправить личное сообщение для plishas Посмотреть профиль Найти все сообщения от plishas
 
Регистрация: 12.01.2011
Сообщений: 3

заменяю один текст другим через прозрачность. кнопки конфликтуют.
- две кнопки
- два абсолютно позиционированного текста(на одном месте)
(один текст прозрачный.)

при нажатии соответствующей кнопки текущий текст должен медленно исчезнуть, а нужный появиться...

проблема:
при нажатии кнопки текст исчезает/появляется за две секунды,
если в это время быстро нажать другую кнопку - оба текста становятся видны и накладываются...

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
	function fade(id, level, step, speed) {
		var stl = document.getElementById(id).style;
		stl.opacity = level / 100; stl.filter = 'alpha(opacity='+level+')';	
		level+=step;
		if(level>=0 && level<=100)
			setTimeout(function(){ fade(id, level, step, speed); }, speed);
	}
	var alt="d1"; 
	function change(id) {
		fade(alt, 100, -1, 1);
		alt=id;
		setTimeout(function(){ fade(id, 0, 1, 1); }, 1000);
	}
</script>
<style type="text/css">
	div#d1, div#d2 { position:absolute; top:10em; left:10em; }
	div#d2 { opacity:0;}
	.butt { cursor : pointer; background:#ccc; margin:1em; width:8em;}
</style>
</head><body>
	<div class="butt" onclick="change('d1')">Button Nr.1...</div>
 	<div class="butt" onclick="change('d2')">button Nr.2...</div>
	<div id="d1">OOOOOOOOOOOOOOOOOOOOOOOOOO</div>
	<div id="d2">AAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</body></html>
Ответить с цитированием