jQuery “$(…).effect is not a function”

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

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>

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.

Luis Donaldo García Castro

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

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);
}

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.

来源：https://stackoverflow.com/questions/21991062/jquery-effect-is-not-a-function

标签

javascript

jquery

function

effect