Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2011, 15:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,253

Сообщение от plishas
если в это время быстро нажать другую кнопку
Как вариант, делай кнопки неактивными на момент "перехода"...
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2011, 15:44
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

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

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

я хочу потом нечто подобное попробовать в галерее картинок - мышкой ведешь по картинкам, они с mouseover увеличиваются а на mouseout уменьшаются, на клик картинка совсем увеличивается.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2011, 16:21
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

Сообщение от plishas
я хочу потом нечто подобное попробовать в галерее картинок - мышкой ведешь по картинкам, они с mouseover увеличиваются а на mouseout уменьшаются, на клик картинка совсем увеличивается.
только учти опыт ведения мышью-здесь на форуме глюки у него обсуждались пару дней назад
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2011, 16:58
Новичок на форуме
Отправить личное сообщение для plishas Посмотреть профиль Найти все сообщения от plishas
 
Регистрация: 12.01.2011
Сообщений: 3

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

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

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

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

получается два текста...
что-то я не соображу как хотя-бы в первой функции второй текст не выводить...
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2011, 17:59
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

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

Последний раз редактировалось dmitriymar, 12.01.2011 в 21:13.
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2011, 20:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,253

Сообщение от 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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 13:06
lastChild работает в IE, как тут быть? Puaris83 Firefox/Mozilla 4 17.04.2010 22:56
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 16:02