javascript - jqueryeffect() 函数无法识别

Question

我在使用 jQueryeffect() 函数在图像上创建反弹效果时遇到问题。 实际上是使用这段代码(调用jQuery库后的代码):

$(document).ready(function() {
  $('#arrow-disclaimer').bind('mouseenter', function(){
  $(this).effect('bounce',500);
  });
});

//Here there isn't the jQuery library, but in the page is included before jqueryUI

<link rel="stylesheet" type="text/css" href="css/style-disclaimer.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<a href="#disclaimer-p">
  <img src="images/arrow483.png" id="arrow-disclaimer" />
</a>

有人可以告诉我为什么会出现此错误吗？

Uncaught TypeError: $(...).effect is not a function

Answer 1

1. 您需要加载 jQuery 才能使用 jQuery-ui 或任何其他依赖插件
2. 您使用的 jquery-ui-i18n 仅用于国际化。您需要包含 jquery-ui 主库，并且如果您想使用 i18n，请将其包含在 jquery-ui 之后。
3. bind在 jQuery 版本 1.7 中已弃用，请使用 on .

$(document).ready(function() {
  $('#arrow-disclaimer').on('mouseenter', function() {
    $(this).effect('bounce', 500);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<a href="#disclaimer-p">
  <img src="images/arrow483.png" id="arrow-disclaimer" />
</a>