抖动的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输入仍然会产生错误。

我准备好删除我的答案，祝你好运，继续前进。