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