Jittery jQuery Animation

Question

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); 
} 

Dies ist die jQuery Ich bin mit meinem Telefon-Symbol (phonenew.png) gleiten links auf MouseEnter- Belichtungs .phone-Nummer zu machen, rollt dann direkt auf mouseleave zurück und versteckt die Telefonnummer. Diese Animation ist sehr nervös. Ich denke, ich vermisse einen Schritt wie Warteschlange oder etwas.

$.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(' + now + '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); 
}); 

Answer 1

Also, ja. Ich empfehle dringend, den Chrome Browser und seine Dev Tools zu verwenden. Ich habe einen JSFiddle (ein Sloppy) aus Ihrem Code-Extrakt erstellt. Es ist nicht perfekt, ich musste ein paar Dinge ändern. Hinweis: Ich verwende jQuery 2.2.3 Welche Version verwenden Sie?

Sein hier: https://jsfiddle.net/ubv51rdk/9/

Wenn ich die Animation zu starten ich sofort eine sich wiederholende Fehler sehen:

Uncaught TypeError: n.easing[this.easing] is not a function

Nach https://api.jquery.com/jQuery.speed/, die Lockerung Argument standardmäßig auf "swing", aber sie sind nur mit dem Wort "Lockerung" müssen Sie etwas anderes dort platzieren ... es gibt eine Menge Auswahlmöglichkeiten. Auschecken https://api.jqueryui.com/easings/

Und ich werde vorschlagen .. Wenn Sie Codierung sind, werden Sie immer strecken, um zu lernen und neue Dinge auszuprobieren. Seien Sie vorsichtig beim Dehnen zu viel .. Sie sollten sich bemühen, immer zu verstehen, was jede Codezeile in Ihrem Programm tut. (Eine Regel, die viele von uns brechen ...) Für jemanden, der noch nie Chrome DevTools verwendet hat, um zu verstehen, wie JavaScript hinter den Kulissen funktioniert, ist dieses Programm wie geschrieben eine gewaltige Strecke. Fast zu viel. Die animateRotate Funktion mit ihrem verschachtelten args Objekt macht dies nicht leicht verständlich. Die Tatsache, dass die Eingänge des Funktionsaufrufs nicht benutzt werden (sowohl easing als auch complete) und das völlig verwirrende Problem, das args.complete = $.proxy(args.complete, e); und die folgende step Funktion umgibt, bringen mich dazu, mir die Haare auszureißen.

Ohne den ursprünglichen Code in seiner ursprünglichen Form zu sehen, ist dies mehr als frustrierend. Hast du eine Referenz? Ist dies ein Beispiel für ein Glücksrad?

Also, ich versuche, durch den Code zu gehen, und offensichtlich JS Geige hat seine Formate eine ganze Menge geändert. Ich sehe nicht, wie es möglich ist, Variablen zu beobachten und durch den Code in JS fiddle zu gehen. Zu viel Aufwand. Ich denke, dass dies in einer einfachen Website entweder auf dem lokalen Host oder irgendwo im Web durchgeführt werden müsste. Wenn Sie das tun und durch den Code gehen, sollten Sie das args Objekt betrachten. Es ist mir nicht klar, wie die complete Sache funktioniert oder warum mein swing Eingang immer noch Fehler erzeugt.

Ich bin bereit, meine Antwort zu löschen, wünsche Ihnen viel Glück und weitermachen.