jQuery fade out image in interval is throwing fadeOut is not a function

Question

I have 4 pictures which I want to change every 3 seconds, but fade it out/in.

I change the pictures successfully but when I add the fadeOut I get the error action.js:14 Uncaught TypeError: $(...).fadeOut is not a function

$(document).ready(function(){

    count = 1;
    setInterval(function () {
       
        count++;

        $('#mainimg').fadeOut(200, function() { //THIS CAUSES THE ERROR
            $('#mainimg').attr('src','img/phone' + count + '.png');
        });

        if(count == 4){
            count = 1;
        }

    }, 3000);

})

This is the entire JS code I have, there is nothing more.

Please provide a minimal, reproducible example so we can help you. — Unmitigated, Jul 21 '20 at 14:51

score 0 · Answer 1 · answered Jul 21 '20 at 14:48

0

Do you have another javascript library on that page? It seems you have the hide function, and the $ defined (prototype, for example, also has an hide function). If that is the case, try:

jQuery("#item_0").fadeOut("slow");

answered Jul 21 '20 at 14:48

user2960308

1
4

I have loaded bootstrap.js and jquery CDN. That's it. – IkePr Jul 21 '20 at 14:48

score 0 · Answer 2 · answered Jul 21 '20 at 14:52

0

I found out the problem. jQuery was slim version, not minifed. That's why it was throwing the error. The jQuery library didn't have fade. Fixed it by just adding the CDN for the minifed version.

answered Jul 21 '20 at 14:52

IkePr

900
4
18
44

jQuery fade out image in interval is throwing fadeOut is not a function

2 Answers2