CODEWITHSUNDEEP
javascriptjqueryhtml
Giuseppe De Paola
Giuseppe De Paola

Reputation: 318

jquery effect() function not recognized

I have a problem creating a bounce effect on an image with jQuery effect() function. Actually is use this code (code after calling the jQuery library): 

$(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>

Could someone tell me why i get this error?

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

Upvotes: 0

Views: 1805

Answers (1)

Tushar
Tushar

Reputation: 87203

  1. You need to load jQuery to use jQuery-ui or any other dependant plugin
  2. You're using jquery-ui-i18n which is used for internationalization only. You need to include jquery-ui main library and if you want to use i18n, include it after jquery-ui.
  3. bind is deprecated in jQuery version 1.7, use 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>

Upvotes: 6

Related Questions