Error with JQuery Script

Question

I developed the below image changer with JQuery:

var images = [];
images[0] = "image1.jpg";
images[1] = "image2.jpg";

var i = 0;
setInterval(fadeDivs, 3000);

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('.slideshow-right-corner img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100);
    })
    i++;
}

For some reason, it works fine locally, however when I integrate with my website, it works fine for the first image in the array and stops working. The following is the error I receive when I inspect the element:

Uncaught TypeError: undefined is not a function (index):398 (anonymous function) (index):398 E.complete jquery-1.3.2.min.js?ver=3.4.1:19 o.fx.step jquery-1.3.2.min.js?ver=3.4.1:19 F jquery-1.3.2.min.js?ver=3.4.1:19 (anonymous function)

What are the differences between your live and test environment? Same versions of jQuery and any other plugins etc? — Rory McCrossan
– Rory McCrossan, Commented May 9, 2014 at 10:03
Needles to say, jQuery 1.3.2 is really, really old (~5 years, 2009). — Felix Kling
– Felix Kling, Commented May 9, 2014 at 10:04

Stefano Altieri · Accepted Answer · 2014-05-09 10:13:32Z

1

The problem is multithreading. The i++ will be evaluated before the fadeOut function.

So when i=2 images[2] will return undefined and the program will stop working.

Try to move i++ inside the function, after fading in.

This is the updated code (TESTED):

function fadeDivs() {
   i = i < images.length ? i : 0;
   $('.slideshow-right-corner img').fadeOut(100, function() {
   $(this).attr('src', images[i]).fadeIn(100);
   i++;
});

edited May 9, 2014 at 10:13

answered May 9, 2014 at 10:05

Stefano Altieri

4,6281 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maurice Perry Over a year ago

and i = i < images.length ? i : 0; as well while you're at it

mohamedrias · Accepted Answer · 2014-05-09 15:52:39Z

0

Working JSBIN DEMO

function fadeDivs() {
  $.each(images, function(e) {
     $('.slideshow-right-corner img').fadeOut(100,    function(){
        $(this).attr('src', images[e]).fadeIn(100);
    });
 });
}

You can remove the i variable outside the function.

edited May 9, 2014 at 15:52

answered May 9, 2014 at 10:17

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

2 Comments

Stefano Altieri Over a year ago

The demo is not working. Try to use different images (and not the same one repeated) and only only will be displayed.

Felix Kling Over a year ago

What's the reason for doing var self = e;? Just use images[e], much simpler.

Al.G. · Accepted Answer · 2014-05-09 10:13:25Z

0

As @Stefano Altieri said, the i variable is increased before the ending of the fadeIn function. Replace the fadeDivs function with this:

function fadeDivs() {
    i = i < images.length ? i : 0;
    $('.slideshow-right-corner img').fadeOut(100, function(){
        $(this).attr('src', images[i]).fadeIn(100, function(){
            i++;
        });
    })
}

answered May 9, 2014 at 10:13

Al.G.

4,4476 gold badges34 silver badges63 bronze badges

Collectives™ on Stack Overflow

Error with JQuery Script

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related