ruby on rails 4 - Jittery jQuery animation -

html

<div class="phone">   <a href="#" >     <img src="/assets/phonenew.png" alt="" height="90px" width="90px" />   </a> </div>  <div class="phone-number">   <a href="#">     <img src="/assets/phonenumber.png" class="phone-full" height="45px" />   </a> </div> 

css

.phone {  position: absolute;  top: 200px;  left: 915px;  cursor: pointer;  z-index: 100; }  .phone-number {   position: absolute;   top: 225px;   left: 908px;   display: none;   cursor: pointer;   font-family: 'open sans';   font-size: 28px;   color: rgb(68, 69, 67); } 

this jquery i'm using make phone icon (phonenew.png) slide left on mouseenter exposing .phone-number, rolls right on mouseleave, hiding .phone-number. animation jittery. think missing step queueing or something..

    $.fn.animaterotate = function(angle,prevangle, duration, easing, complete) {   var args = $.speed(duration, easing, complete);   var step = args.step;   return this.each(function(i, e) {       args.complete = $.proxy(args.complete, e);       args.step = function(now) {           $.style(e, 'transform', 'rotate(' + + 'deg)');           if (step) return step.apply(e, arguments);       };        $({deg: prevangle}).animate({deg: angle}, args);   });  }; var angle = 0; var prevangle = 0;  $(".phone").mouseenter(function(e) {   prevangle = angle   angle -= 100;   $(this).animaterotate(angle, prevangle, 250);   e.preventdefault();   $(this).animate({     left: "800px",     opacity: 1   }, {     duration: 300,     queue: false   });   $(".phone-number").fadein(1000);   // $(".phone-number").show("slide", 400); }); $(".phone").mouseleave(function(e) { prevangle = angle angle += 100; $(this).animaterotate(angle, prevangle, 350); e.preventdefault(); $(this).animate({   left: "905px",   opacity: 1   }, {     duration: 300,     queue: false   });   $(".phone-number").hide("slide", "easeinquart", 300); }); 

so, yeah. recommend time start using chrome browser , dev tools. i've created (a sloppy) jsfiddle code extract. not perfect, had change few things. note: i'm using jquery 2.2.3 version using?

its here: https://jsfiddle.net/ubv51rdk/9/

when start animation see repeating error:

uncaught typeerror: n.easing[this.easing] not function

according https://api.jquery.com/jquery.speed/, easing argument defaults "swing" you're using word "easing" you've got place else there... there ton of choices. check out https://api.jqueryui.com/easings/

and suggest.. when coding stretching learn , try new things. careful of stretching much.. should strive understand each , every line of code in program does. (a rule lots of break...) has never used chrome devtools understand how javascript works behind scenes, program written mighty big stretch. much. animaterotate function convoluted args object not make easy understand. fact inputs function call aren't being used (both easing , complete) , totally confusing issue surrounding args.complete = $.proxy(args.complete, e); , following step function having me pull hair out.

without seeing original code in original form, more frustrating. have reference? wheel of fortune example?

so, i'm trying step thru code, , apparently js fiddle has changed formats whole lot. don't see how possible place watch on variables , step thru code in js fiddle. overhead. think have done in simple website either on local host or hosted on web somewhere. if that, , step thru code, want watch args object. not clear me on how complete thing works or why swing input still generating errors.

i'm ready delete answer, wish best of luck , move on.