Собственно, пример:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ</title>
<style type="text/css">
#visibleField{
position: absolute;
left: 200px;
top: 200px;
width: 300px;
height: 200px;
outline: double #000 4px;
overflow: hidden;
}
#conteiner{
position: absolute;
top: 0px;
left: 0px;
}
.layer{
position: absolute;
width: 300px;
height: 200px;
}
#layer1{
background-color: #F00;
left: 0px;
top: 0px;
}
#layer2{
background-color: #0F0;
left: 300px;
top: 0px;
}
</style>
</head>
<body>
<div id="visibleField"><div id="conteiner">
<div id="layer1" class="layer"> </div>
<div id="layer2" class="layer"> </div>
</div></div>
<script type="text/javascript">
var timer, pos = 0, dir, movingTo
function moving() {
if(pos==movingTo) {
timer = clearInterval(moving)
} else {
pos = pos+2*dir
document.getElementById('conteiner').style.left=pos+'px'
}
}
document.getElementById('layer1').onclick = function() {
dir = -1
movingTo = -300
timer = setInterval(moving, 25)
}
document.getElementById('layer2').onclick = function(e) {
dir = 1
movingTo = 0
timer = setInterval(moving, 50)
}
</script>
</body>
Так вот, при каждом новом выполнении setInterval(moving, 50), его скорость увеличивается. Почему???
Только это вовсе не ответ на мой вопрос!!! Я смог убрать ускорение, добавив еще пару clearInterval'ов:
