Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   заменяю один текст другим через прозрачность. кнопки конфликтуют. (https://javascript.ru/forum/events/14354-zamenyayu-odin-tekst-drugim-cherez-prozrachnost-knopki-konfliktuyut.html)

plishas 12.01.2011 15:06

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

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

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

<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>

ksa 12.01.2011 15:24

Цитата:

Сообщение от plishas
если в это время быстро нажать другую кнопку

Как вариант, делай кнопки неактивными на момент "перехода"...

dmitriymar 12.01.2011 15:44

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

plishas 12.01.2011 15:55

Цитата:

делай кнопки неактивными на момент "перехода"...
как это можно сделать?

вообще-то не очень подходит... было бы лучше другой вариант

я хочу потом нечто подобное попробовать в галерее картинок - мышкой ведешь по картинкам, они с mouseover увеличиваются а на mouseout уменьшаются, на клик картинка совсем увеличивается.

dmitriymar 12.01.2011 16:21

Цитата:

Сообщение от plishas
я хочу потом нечто подобное попробовать в галерее картинок - мышкой ведешь по картинкам, они с mouseover увеличиваются а на mouseout уменьшаются, на клик картинка совсем увеличивается.

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

plishas 12.01.2011 16:58

Цитата:

Сообщение от dmitriymar (Сообщение 87706)
как другой вариант-когда один появляется принудительно гасить другой

это бы ло бы идеально! собственно в этом моя проблема, сформулированная по другому
только я не догоняю как это сделать...

что происходит? - одну за другой запускаю две функции:

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

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

получается два текста...
что-то я не соображу как хотя-бы в первой функции второй текст не выводить...

dmitriymar 12.01.2011 17:59

посмотри на свою логику-
1)function change(id) {
14 fade(alt, 100, -1, 1);-второй и послед запуски запуск-делаешь невидимой постепенно-не понятно какую -при первом запуске уже отработала раз alt=id;
15 alt=id;
16 setTimeout(function(){ fade(id, 0, 1, 1); }, 1000);- опять ставишь в очередь -через секунду-видимой постепенно-причём ту какую ты возможно до этого скрыл?
17 }


2)если во время 100 проходов функции function fade(id, level, step, speed) -ты нажмёшь на кнопку другую-то выйдет бок -во время угасания\проявки текста (неизвестно какого)-начнётся угасание текст (неизвестно какого) и угасание\проявка первого остановиться. ну и +описанное в пункте 1

3) ну а если нажать на кнопку 1 первой то вообще этот участок непонятен-
var alt="d1"
13 function change(id) {
14 fade(alt, 100, -1, 1);
15 alt=id;
16 setTimeout(function(){ fade(id, 0, 1, 1); }, 1000);
17 }
скроется и первый текст плавно и появиться плавно через через 1 сек


4)это не считая того что в очередь на исполнение будут непонятно как ставиться-хаотично и непредсказуемо код будет работать-всё будет зависеть от того в какой момент и какие кнопки нажимать будешь-и всё равно будет жить своей жизнью(по ходу искусственный интелект))))

переделывай логику вобщем раз десять -это сообщение правил-и всё равно находятся варианты новые как перекосячит....

ksa 12.01.2011 20:34

Цитата:

Сообщение от plishas
как это можно сделать?

Таки сделать кнопки - кнопками. И потом это использовать...

<!DOCTYPE html>
<head>	
<style>
</style>
<script>
function Go() {
	document.getElementById("test").disabled=(document.getElementById("test").disabled)? false: true
	document.getElementById("btn").value=(document.getElementById("test").disabled)? 'On': 'Off'
}
</script>
</head>
<body>
<input type='button' id='test' value='Test' onclick='alert(1)' />
<hr />
<input type='button' id='btn' value='Off' onclick='Go()' />
</body>
</html>


Часовой пояс GMT +3, время: 09:24.