jQuery "$(...).effect is not a function"

Question

I searched through the forum already but I can't find any way to fix the problem I have with the "effect" function in jQuery.

I get exactly the error TypeError: $(...).effect is not a function in the code :

$('div.step').removeClass('active');
$("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
$('#step' + step + '').addClass('active');
$('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);

I included both jQuery and jQuery UI like this in <head></head> :

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

But in vain, do you have any idea? Thank you

This is the jsfiddle : http://jsfiddle.net/gYP9m/ Except a datepicker triggered by some `$().fdatepicker()...` in the same `document.ready` I don't have any other plugin included. Thank you — mentinet, Feb 24 '14 at 15:12
I had the same problem and fixed it by using only one jquery lib. so dont overwrite it — moody, Oct 15 '15 at 11:12

score 11 · Answer 1 · answered Feb 24 '14 at 14:52

11

You need to put your custom script after your jQuery and jQuery UI declarations, and wrap it within a document ready() function:

<body>
    ...
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            ...
        });
    </script>
</body>

answered Feb 24 '14 at 14:52

James Donnelly

126,410
34
208
218

That is what I do, check the jsfiddle above to see what I coded. Thank you – mentinet Feb 24 '14 at 15:13
@mentinet you haven't included jQuery UI in your JSFiddle example. It works fine with it: http://jsfiddle.net/JamesD/gYP9m/1. – James Donnelly Feb 24 '14 at 15:18
Ok I can see it. But the code is exactly like mine and I include the jQuery UI...although it doesn't work on my machine. How did you include the jQuery UI on jsfiddle ? – mentinet Feb 24 '14 at 15:23
Click on External Resources in the sidebar and paste in the URL. – James Donnelly Feb 24 '14 at 15:27
Ok thank, it works. Although, I still can't make it work on my machine. I tried putting the `$(document).Ready()`in the `head` as well (I had it in my footer file) but still not working. – mentinet Feb 24 '14 at 16:48

score 8 · Answer 2 · answered Apr 06 '16 at 09:06

I do not know if the problem was solved but I found a way to replicate the shake function with the animation function and it works like a charm:

function shake() {
        var div = document.getElementById('yourElementID');
        var interval = 100;
        var distance = 10;
        var times = 4;

        $(div).css('position', 'relative');

        for (var iter = 0; iter < (times + 1) ; iter++) {
            $(div).animate({
                left: ((iter % 2 == 0 ? distance : distance * -1))
            }, interval);
        }                                                                                                          
        $(div).animate({ left: 0 }, interval);
    }

This solution belongs to thisSite, all credits to them. I hope this will be useful to someone in the future, if so please mark it as solution, greetings.

score 7 · Answer 3 · edited Jun 05 '19 at 11:25

7

Add jQueryUI not just jQuery. jQuery doesn't contain the effect() function: https://code.jquery.com/ui

edited Jun 05 '19 at 11:25

double-beep

5,031
17
33
41

answered Jun 05 '19 at 01:21

Luis Donaldo García Castro

71
1
2

score 0 · Answer 4 · answered Feb 24 '14 at 14:57

Try to use

$(document).ready(function () {
    $('div.step').removeClass('active');
    $("div.step").effect('slide', {direction: 'right', mode: 'hide'}, 500);
    $('#step' + step + '').addClass('active');
    $('#step' + step + '').effect('slide', {direction: 'right', mode: 'show'}, 500);
}

score 0 · Answer 5 · answered Mar 23 '17 at 06:04

0

For me, it turned out that my project was using a "Custom download" version of Jquery-UI which had been set to exclude the effects plugin. Replacing my version of Jquery UI with a full version fixed my issue.

answered Mar 23 '17 at 06:04

Wesley Smith

19,401
22
85
133

jQuery "$(...).effect is not a function"

5 Answers5

Linked