Q:

Помощь в анимации на Jquery

Пишу курсовую работу.Нужно зделать виртуальную лабораторную работу на тему "Електромагнитная индукция".Решил здаелать опыт в котором стрелка гальванометра отклоняется при действии на котушку,магнита.
Вот у меня получилось.
https://codepen.io/jSas/pen/vybLZj
    `$(document).ready(function(){

     $( "#slider" ).slider({
        orientation: 'vertical',
        value: 60,
        min: 0,
        max : 60,
    slide: function(event, ui) {
                var value = $( "#slider" ).slider('value');
                $('.arrow img').css({'transform':'rotate('+ (390-value)+      'deg)'});`

 });

Но что б было так как надо,нужно с емулировать работу магнитного поля.
При приближение магнита к котушке,стрелка отклоняется,а потом стает обратное положение.Чем ближе магнит к котушке тем больше отклоняется стрелка,и стает в обратное положение равное в даном случае нулю.

A:

Только тут недочёт. Когда оно плавно отправляется на 0, то потом, когда опять двигаешь ползунок, стрелка резко меняет позицию. Над этим надо уже думать, как исправить
$(document).ready(function(){
   var timer;
   $("#slider").slider({
      orientation: 'vertical',
      value: 30,
      min: 0,
      max : 30,
      slide: function(event, ui) {
         var value = $( "#slider" ).slider('value');
         clearInterval(timer);
         $('.arrow img').css({'transform':'rotate('+ (390-value)+ 'deg)'});
         timer = setTimeout(function() {
            $({r: (390-value)}).animate({r: 360}, {
               duration: 1000,
               step: function(r) {
                  $('.arrow img').css({'transform':'rotate('+r+'deg)'});
               }
            });
         }, 500);
    }});
});

