вращение вентилятора вокруг своей оси

[Nailya]

Добрый день.

Пытаюсь написать скрипт по вращению вентилятора вокруг своей оси: вот ссылка, работает более-менее только в FF: http://test.w-complex.ru/mac/control...rol_panel.html

Задача моя такая, при нажатии на кнопку пуск, вентилятор должен вращаться, при нажатии на стоп - останавливаться.
Но работает, как я уже сказала в FF, и то не стабильно, в осталных браузерах кнопка стоп не срабатывает.

Еще, если два раза нажать на пуск, то вентилятор ускоряет свое движение, а это не нужно. И кнопка стоп в этом случае не срабатывате.

Если у вас какие-н варианты решения этой задачи?

Вот скрипт:

function startRound()
{
    document.getElementById('stop').style.background = '#e8c1c2';
    var el = document.getElementById('vent_img');
    this.Elem = '';
    moveRound(el);
}
function moveRound(el)
    {
        if (this.Elem == '')
        {
            this.Elem = el;
            this.Degree = 0;
            this.intid = setInterval (moveRound, 1);
        }
        else
        {
            if (this.Degree > 100000) {this.Degree = 0}
            this.Degree += 2;
            var txt = 'transform: rotate(' + this.Degree + 'deg); ';          // FireFox
            txt += '-webkit-transform: rotate(' + this.Degree + 'deg); '; // Safari & Chrome
            txt += '-o-transform: rotate(' + this.Degree + 'deg); ';      // Opera
            this.Elem.style.cssText = txt;

        }
        if (document.getElementById('stop').style.background == 'none repeat scroll 0% 0% rgb(237, 28, 36)')
        {
            clearInterval(this.intid);
        }
    }
function stopRound()
{
    document.getElementById('stop').style.background = '#ED1C24';
}

<ul class="ventilator">
                        <li class="start" onclick="startRound();">ПУСК</li>
                        <li class="stop" id="stop" onclick="stopRound()">СТОП</li>
                        <li class="vent"><img src="img/ventilater_small1.png" alt="" id="vent_img"></li>
                    </ul>

.ventilator .start{
    margin-top: 16px;
    padding: 5px 22px;
    border:1px solid #cdcfce;
    background: #bdd9bf;
}
.main  .ventilator .stop{
    margin-top: 16px;
    padding: 5px 22px;
    border:1px solid #cdcfce;
    background: #e8c1c2;
}
.ventilator .start:hover{
    border: 1px solid #59595b;
    background: #28b532;
}
.ventilator .stop:hover{
    border: 1px solid #59595b;
    background: #ED1C24;
}

[jsnb]

Ну так а кто мешает отслеживать состояние этого вентилятора через переменные. Как-нибудь так: http://learn.javascript.ru/play/CbSJRb
И зачем такой дикий таймер, не проще увеличить интервал и добавлять больше градусов? ИЛи вообще использовать CSS анимацию.

[Nailya]

Спасибо, помогли)

[devote]

<style type="text/css">
  #vent_img {
    display: inline-block;
    -webkit-animation: imageRotate 1s linear infinite;
    -o-animation: imageRotate 1s linear infinite;
    animation: imageRotate 1s linear infinite;
  }
  @-webkit-keyframes imageRotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
  }
  @-o-keyframes imageRotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
  }
  @keyframes imageRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }
</style>
<ul class="ventilator">
   <li class="start" onclick="startRound();">ПУСК</li>
   <li class="stop" id="stop" onclick="stopRound()">СТОП</li>
   <li class="vent"><img src="http://test.w-complex.ru/mac/control_panel/img/ventilater_small1.png" alt="" id="vent_img"></li>
</ul>
<script>
  function startRound() {
    document.getElementById('vent_img').style.cssText =
              '-webkit-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running;';
  }
  function stopRound() {
    document.getElementById('vent_img').style.cssText =
              '-webkit-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused;';
  }
</script>