Question

我试图在用户按下右箭头键时跳转图像，虽然我认为我将正确的代码串在一起，但是当我运行它时会出现此错误：

jQuery.easing [this.easing]不是函数

我环顾四周，并且已经看到错误与jQuery版本和jQuery UI无法匹配的建议。我正在使用jQuery UI 1.12.0-rc.2，而jQuery版本是来自CDN的1.12.4。

这是我的代码：

HTML：

<head>
<title>Barry bounce</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/plugins/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-app="myApp">
  <div id="canvas">
    <img src="img/characters/BarryBall.png" id="barry" alt="">
  </div>
</body>

使用Javascript：

$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").animate({
        left: '+=350'
      }, ( "bounce", { times: 1 }, "slow" ), { queue: false }); 
});

可能导致此问题的原因是什么？

Answer 1

bounce不是有效的jQuery UI easing，而是与toggle一起使用，是CSS动画而不是jQuery动画。此外，您错过了必要的CSS包含。我已经制作了一种working sample on jsfiddle，引用了这里：

<div id="canvas">
  <img src="http://kilon.org/samples/images/ball.png" id="barry" alt="" style="position:relative;">
</div>

$('body').on('keydown',function(e) {
  switch(e.keyCode) {
    case 39:
      $( "#barry" ).toggle( "bounce", { times: 1 }, "slow" );
  }
});

Answer 2

看起来您想要使用jQuery UI effect，而不是使用animate。以下是如何退回#barry：

的示例

$(document).keydown(function(e) {
  switch(e.which) {
    case 39:
      $("#barry").effect("bounce", { times: 5 }, "slow");
      break;
  }
});

你可以在这个jsFiddle中看到整个解决方案：https://jsfiddle.net/mgaskill/myor8goo/。这段代码除了提出要求之外还做了一些额外的事情，并展示了当按下箭头键时如何在球上使用一些不同的动画。使用这些键与球交互：

up将球反弹到位
left将球向左移动然后反弹
right会将球向右移动然后反弹
down会暂时收缩球

您与jQuery.easing的问题在于，您传递给animate的论据只是处于错误的位置。事实上，第二和第三个论点都被错误地放置了。这是您匹配的方法签名：.animate( properties, duration, easing, complete)，( "bounce", { times: 1 }, "slow" )应用于duration，{ queue: false }用于easing参数，因此错误jQuery.easing。

关于jQuery UI与jQuery的兼容性，jQuery UI附带了一个内置的jQuery核心的迷你版本供自己使用; jQuery和jQuery UI版本之间没有冲突。

请注意，您还可以从CDN加载jQuery UI，这样您就不必自己托管它。另一个好处是它可以通过从CDN加载来显着加快页面加载速度。在此处查看CDN详细信息：https://code.jquery.com/ui/。 jsFiddle中的jQuery UI从这里加载：https://code.jquery.com/ui/1.11.4/jquery-ui.min.js

使图像动画和弹跳同时出错 - jQuery UI

2 个答案: