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

这是我用来使我的电话图标(phonenew.png)在鼠标入口显示.phone- jQuery时向左滑动，然后在鼠标离开时向右滚动，隐藏.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/的说法，宽松的论点默认是"swing“，但你只是在使用”宽松“这个词，你必须在那里放置其他东西……有很多选择。查看https://api.jqueryui.com/easings/

我会建议..。当你编写代码的时候，你总是要不断地学习和尝试新的东西。只是要小心不要伸展太多..您应该努力始终理解程序中的每一行代码都做了什么。(我们很多人都打破了这条规则...)对于从未使用过Chrome DevTools来理解JavaScript在幕后是如何工作的人来说，这个程序的编写是一个巨大的延伸。几乎太多了。带有复杂的args对象的animateRotate函数并不容易理解。函数调用的输入没有被使用( easing和complete)的事实，以及围绕args.complete = $.proxy(args.complete, e);和下面的step函数的完全令人困惑的问题让我抓狂。

没有看到原始代码的原始形式，这是非常令人沮丧的。你有推荐人吗？这是来自财富之轮的例子吗？

所以，我试着一步一步通过代码，显然JS fiddle已经改变了它的格式。我不明白如何在JS fiddle中对变量进行监视并逐步执行代码。开销太大了。我认为这必须在一个简单的网站上完成，无论是在本地主机上还是在某个地方托管在web上。如果您这样做，并逐步执行代码，您将希望查看args对象。我不清楚complete是如何工作的，也不清楚为什么我的swing输入仍然会产生错误。

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