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-number的jQuery，然后在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浏览器及其开发工具。我从你的代码提取中创建了（一个Sloppy）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/，宽松参数默认为“摇摆”，但你只是使用“缓和”这个词你必须在那里放置其他东西......有很多选择。查看https://api.jqueryui.com/easings/

我会建议..当你编码时，你总是会伸展学习和尝试新事物。小心拉伸太多..你应该努力总是理解程序中每一行代码的作用。（我们很多人都违反规则......）对于那些从未使用Chrome DevTools来了解JavaScript如何在幕后工作的人来说，这个程序是一个强大的延伸。几乎太多了。 animateRotate函数及其复杂的args对象并不易于理解。未使用函数调用的输入（easing和complete）以及围绕args.complete = $.proxy(args.complete, e);和以下step函数的完全混乱的问题我拉出我的头发。

没有看到原始形式的原始代码，这不仅令人沮丧。你有参考吗？这是来自财富之轮的例子吗？

所以，我试图通过代码，显然JS小提琴已经改变了它的格式。我不知道如何通过监视变量来监视变量并通过JS小提琴中的代码进行操作。开销太大了。我认为这必须在一个简单的网站上完成，无论是在本地主机上还是在网络上托管。如果您这样做，并逐步执行代码，则需要查看args对象。我不清楚complete的工作原理是什么，或者为什么我的swing输入仍然会产生错误。

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

Jittery jQuery动画

1 个答案: