抖動的jQuery的動畫

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

這是jQuery的我使用，使我的電話圖標（phonenew.png）滑塊向左上的mouseenter暴露.phone號碼，然後在mouseleave上向右滾動，隱藏.phone-number。這部動畫非常緊張。我想我錯過了排隊等步驟。

$.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

所以，是的。我強烈建議開始使用Chrome瀏覽器及其開發工具。我已經從您的代碼提取中創建了（一個馬虎）JSFiddle。它不完美，我不得不改變一些東西。注意：我正在使用jQuery 2.2.3您使用的是哪個版本？

它的位置：https://jsfiddle.net/ubv51rdk/9/

當我開始動畫我立即看到一個重複的錯誤，：

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

據https://api.jquery.com/jQuery.speed/，緩動參數默認爲「搖擺」，但你只是使用單詞「easing」你必須在那裏放置別的東西...有很多選擇。退房https://api.jqueryui.com/easings/

而且我會建議..當你編碼時，你將永遠在學習和嘗試新事物。只是要小心伸展過多。你應該努力理解程序中每一行代碼的作用。 （我們很多人都打破了......）對於從來沒有使用過Chrome DevTools的人來理解JavaScript是如何在幕後工作的，這個程序寫得非常有意義。幾乎太多了。 animateRotate函數與其複雜的args對象不會使這一點很容易理解。事實上，函數調用的輸入未被使用（easing和complete）以及圍繞args.complete = $.proxy(args.complete, e);和以下step函數的完全混淆問題都讓我不知所措。

沒有看到原始代碼的原始形式，這是令人沮喪的。你有參考嗎？這是來自財富輪的例子嗎？

所以，我試圖通過代碼，顯然JS小提琴已經改變了它的格式很多。我看不出如何將變量放置在變量上並通過JS小提琴中的代碼。太多的開銷。我認爲這將不得不在一個簡單的網站上完成，或者在本地主機上進行，或者在某個網站上託管。如果你這樣做，並通過代碼，你會想看args對象。我不清楚complete的工作原理或爲什麼我的swing輸入仍然會產生錯誤。

我準備好刪除我的答案，祝你好運，繼續前進。