JQuery Bouncing Effect

Question

Got a few lines of coder here im trying to figure out why it isnt working. Its a simple .effect in jquery that is triggered in a click of a button.

$(document).on('click','#sub', function(){
    $('.circle').effect( "bounce", {times:3}, 300 );
});

The error im faced with is Uncaught TypeError: $(...).effect is not a function in console. Thanks for any suggestions!

`effect()` method isn't part of jQuery core, but jQuery UI... So include jQuery UI too. That's said, you could animate it using CSS instead — A. Wolff, Jan 15 '16 at 09:44
What's the version of jQuery you are using and does that version have an api called effect()? — james_s_tayler, Jan 15 '16 at 09:45
@A.Wolff sorry im quite new to jquery what do you mean i need to include the jquery ui too? — factordog, Jan 15 '16 at 09:46
[jQuery UI](https://jqueryui.com/) != jQuery core. Include jQuery UI after jQuery — A. Wolff, Jan 15 '16 at 09:47
@factordog So you are doing something wrong... Without describing what you are doing nor error you get, how do you expect someone else to help??? — A. Wolff, Jan 15 '16 at 09:54
Also, `.effect()` is jQueryUI, https://api.jquery.com/category/effects/ this ones are jQuery — miguelmpn, Jan 15 '16 at 10:00
@miguelmpnit already is wrapped in $(document).ready im just trying to get that part of the code working. A. Wolff I went to download the Jquery UI and it said bad connection to their server, so will have to wait till I can actually download the file to use it — factordog, Jan 15 '16 at 10:01
Read this http://stackoverflow.com/questions/10363671/jquery-bounce-effect-on-click-no-jquery-ui — miguelmpn, Jan 15 '16 at 10:05

score 1 · Accepted Answer · answered Jan 15 '16 at 10:03

1

Reading from the question and the discussing below, its clear that your are missing Jquery UI file. Import the Jquery UI

I Have created fiddle for your question for Help.

<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.js">

-Help :)

answered Jan 15 '16 at 10:03

Help

Okay great, would I link that after my which holds that code? – factordog Jan 15 '16 at 10:05
nevermind its working ^^ had to remove some old links to ajax library that was there! thanks for the link. – factordog Jan 15 '16 at 10:06

miguelmpn · Answer 2 · 2016-01-15T10:46:01.857

0

Also, check CSS the version, I made this Fiddle

With this you only need normal jQuery

jQuery(document).ready(function(){
    $(document).on('click','#sub', function(){
        $(this).toggleClass('effect');
  })
});

The effect class has the transition and it is added when you click the circle

edited Jan 15 '16 at 10:46

answered Jan 15 '16 at 10:23

miguelmpn

2 Answers2