заменяю один текст другим через прозрачность. кнопки конфликтуют.
- две кнопки
- два абсолютно позиционированного текста(на одном месте) (один текст прозрачный.) при нажатии соответствующей кнопки текущий текст должен медленно исчезнуть, а нужный появиться... проблема: при нажатии кнопки текст исчезает/появляется за две секунды, если в это время быстро нажать другую кнопку - оба текста становятся видны и накладываются... <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, время: 12:24. |