Форум

Hadouken · #1 (**permalink**) 11.01.2015, 15:59

Всем привет! Пользуюсь плагином jQueryRotate, не получается реализовать, чтобы при клике запускалась анимация, а при повторном клике останавливалась и если нажать еще раз, то начать с того же места. Подскажите, пожалуйста, как мне это сделать? в Javascript не силен, пробовал через bind и unbind, но ничего не получается

она работает правильно только на наведение мышью
Вот мой код

var value = 0;
$("#image").rotate({
    bind: {
        mouseover: function rotation() {
            value += 360;
            $(this).rotate({
                animateTo: value,
                callback:rotation,
                easing: function (x,t,b,c,d){ 
                    return c*(t/d)+b;}
            })
        },
        mouseout:function rotation(){
           setTimeout(function(){
                          $("#image").stopRotate();
                      }, 100);
        }
    }

рони · #2 (**permalink**) 11.01.2015, 19:01

Hadouken,
может css3

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 img {
    -webkit-animation: play 1s infinite ;
       -moz-animation: play 1s infinite;
         -o-animation: play 1s infinite;
            animation: play 1s infinite  ;
}
.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

@-webkit-keyframes play {
    from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-moz-keyframes play {
   from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}


@-o-keyframes play {
    from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes play {
   from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <script>
    $(function () {

$("#image").click(function() {
 $(this).toggleClass("paused")
})
    });
  </script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="image" class="paused">
</body>
</html>

Hadouken · #3 (**permalink**) 11.01.2015, 20:07

рони,
спасибо! отличная идея)

danik.js · #4 (**permalink**) 11.01.2015, 20:36

Если jquery только для этого - можно выкинуть ее нафиг:

image.onclick = function() {
 this.classList.toggle('paused');
};

И скачать с инета и подключить classList.js polyfill

Форум

Справочник

Discord чат

Курсы javascript