Question

我在使用jQuery effect（）函数在图像上创建反弹效果时遇到问题。实际上是使用这段代码（调用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>

有人能告诉我为什么会收到此错误吗？

未捕获的TypeError：$（...）。效果不是函数

Answer 1

您需要加载jQuery以使用jQuery-ui或任何其他依赖插件
您使用的jquery-ui-i18n仅用于国际化。你需要包含jquery-ui主库和如果你想要使用i18n，请在jquery-ui之后包含它。
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>

jquery effect（）函数无法识别

1 个答案: