заменяю один текст другим через прозрачность. кнопки конфликтуют.
- две кнопки
- два абсолютно позиционированного текста(на одном месте) (один текст прозрачный.) при нажатии соответствующей кнопки текущий текст должен медленно исчезнуть, а нужный появиться... проблема: при нажатии кнопки текст исчезает/появляется за две секунды, если в это время быстро нажать другую кнопку - оба текста становятся видны и накладываются...
<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>
|
Цитата:
|
как другой вариант-когда один появляется принудительно гасить другой
|
Цитата:
вообще-то не очень подходит... было бы лучше другой вариант я хочу потом нечто подобное попробовать в галерее картинок - мышкой ведешь по картинкам, они с mouseover увеличиваются а на mouseout уменьшаются, на клик картинка совсем увеличивается. |
Цитата:
|
Цитата:
только я не догоняю как это сделать... что происходит? - одну за другой запускаю две функции: 1-я гасит первый текст, и через секунду начинает выводить второй (id которого запоминает в глобальную перемнную) 2-я (такая же ) функция запущенная с другой кнопки берет эту глобальную перемнную и начинает гасить второй текст, а через секунду начинает выводить первый... получается два текста... что-то я не соображу как хотя-бы в первой функции второй текст не выводить... |
посмотри на свою логику-
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)это не считая того что в очередь на исполнение будут непонятно как ставиться-хаотично и непредсказуемо код будет работать-всё будет зависеть от того в какой момент и какие кнопки нажимать будешь-и всё равно будет жить своей жизнью(по ходу искусственный интелект)))) переделывай логику вобщем раз десять -это сообщение правил-и всё равно находятся варианты новые как перекосячит.... |
Цитата:
<!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, время: 03:59. |