Question

Okay, I just cannot figure this one out. After looking and re-looking at my code for what is probably hours now, I am still not any closer to finding out this strange behavior.

It has to do with the fading of the background and that it is leaving off about 12 of the images that are listed in the array.

The images that are being left off are: bg6, bg36, bg13, bg8, bg14, bg15, bg24, bg29, bg27, bg9, bg19, bg3

Main Code Part 1:

insertLayer();

var bg1 = "#000 url('./images/background/image_1.jpg') no-repeat fixed center center";
var bg2 = "#000 url('./images/background/image_2.jpg') no-repeat fixed center center";
var bg3 = "#000 url('./images/background/image_3.jpg') no-repeat fixed center center";

var bg4 = "#000 url('./images/background/image_4.jpg') no-repeat fixed center center";
var bg5 = "#000 url('./images/background/image_5.jpg') no-repeat fixed center center";
var bg6 = "#000 url('./images/background/image_6.jpg') no-repeat fixed center center";

var bg7 = "#000 url('./images/background/image_7.jpg') no-repeat fixed center center";
var bg8 = "#000 url('./images/background/image_8.jpg') no-repeat fixed center center";
var bg9 = "#000 url('./images/background/image_9.jpg') no-repeat fixed center center";

var bg10 = "#000 url('./images/background/image_10.jpg') no-repeat fixed center center";
var bg11 = "#000 url('./images/background/image_11.jpg') no-repeat fixed center center";
var bg12 = "#000 url('./images/background/image_12.jpg') no-repeat fixed center center";

var bg13 = "#000 url('./images/background/image_13.jpg') no-repeat fixed center center";
var bg14 = "#000 url('./images/background/image_14.jpg') no-repeat fixed center center";
var bg15 = "#000 url('./images/background/image_15.jpg') no-repeat fixed center center";

var bg16 = "#000 url('./images/background/image_16.jpg') no-repeat fixed center center";
var bg17 = "#000 url('./images/background/image_17.jpg') no-repeat fixed center center";
var bg18 = "#000 url('./images/background/image_18.jpg') no-repeat fixed center center";

var bg19 = "#000 url('./images/background/image_19.jpg') no-repeat fixed center center";
var bg20 = "#000 url('./images/background/image_20.jpg') no-repeat fixed center center";
var bg21 = "#000 url('./images/background/image_21.jpg') no-repeat fixed center center";

var bg22 = "#000 url('./images/background/image_22.jpg') no-repeat fixed center center";
var bg23 = "#000 url('./images/background/image_23.jpg') no-repeat fixed center center";
var bg24 = "#000 url('./images/background/image_24.jpg') no-repeat fixed center center";

var bg25 = "#000 url('./images/background/image_25.jpg') no-repeat fixed center center";
var bg26 = "#000 url('./images/background/image_26.jpg') no-repeat fixed center center";
var bg27 = "#000 url('./images/background/image_27.jpg') no-repeat fixed center center";

var bg28 = "#000 url('./images/background/image_28.jpg') no-repeat fixed center center";
var bg29 = "#000 url('./images/background/image_29.jpg') no-repeat fixed center center";
var bg30 = "#000 url('./images/background/image_30.jpg') no-repeat fixed center center";

var bg31 = "#000 url('./images/background/image_31.jpg') no-repeat fixed center center";
var bg32 = "#000 url('./images/background/image_32.jpg') no-repeat fixed center center";
var bg33 = "#000 url('./images/background/image_33.jpg') no-repeat fixed center center";

var bg34 = "#000 url('./images/background/image_34.jpg') no-repeat fixed center center";
var bg35 = "#000 url('./images/background/image_35.jpg') no-repeat fixed center center";
var bg36 = "#000 url('./images/background/image_36.jpg') no-repeat fixed center center";

var bg37 = "#000 url('./images/background/image_37.jpg') no-repeat fixed center center";
var bg38 = "#000 url('./images/background/image_38.jpg') no-repeat fixed center center";
var bg39 = "#000 url('./images/background/image_39.jpg') no-repeat fixed center center";

var bg40 = "#000 url('./images/background/image_40.jpg') no-repeat fixed center center";
var bg41 = "#000 url('./images/background/image_41.jpg') no-repeat fixed center center";

 var images = [bg30, bg34, bg6, bg7, bg10, bg36, bg33, bg26, bg14, bg5, bg40, bg13, bg16, bg23, bg8, bg18, bg32, bg14, bg31, bg15, bg24, bg20, bg22, bg29, bg37, bg41, bg27, bg25, bg12, bg9, bg4, bg21, bg19, bg1, bg28, bg3, bg2, bg39, bg38];

var current = 0;

for (var a = 0; a < 39; a++)
{
 $('#fade1').fadeOut(16000, function()
 {
  $('#fade1').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }

 $('#fade1').fadeIn(16000, function()
 {
  $('#background').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }

 $('#fade1').fadeOut(16000, function()
 {
  $('#fade1').css("background", images[current]);
  current++;
 });

 if (current > 38)
 {
  current = 0;
 }
}

Main Code Part 2:

var backgroundFader = function(element, bgClasses, nextChange) 

{
 this.cssProps = {'position' : 'relative', 'z-index' : 100};
 this.bgs   = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41'];

 this.element  = element || ".bg_fader";
};

function insertLayer(element)
{
 var cssProps = {'position' : 'relative', 'z-index' : 100};
 var bgs   = ['bg1', 'bg2', 'bg3', 'bg4', 'bg5', 'bg6', 'bg7', 'bg8', 'bg9', 'bg10', 'bg11', 'bg12', 'bg13', 'bg14', 'bg15', 'bg16', 'bg17', 'bg18', 'bg19', 'bg20', 'bg21', 'bg22', 'bg23', 'bg24', 'bg25', 'bg26', 'bg27', 'bg28', 'bg29', 'bg30', 'bg31', 'bg32', 'bg33', 'bg34', 'bg35', 'bg36', 'bg37', 'bg38', 'bg39', 'bg40', 'bg41'];

 var element  = element || ".bg_fader";

 var layerel = element.substr(1) + "-layer";
 if(jQuery("#"+layerel).length == 0)
 {
  jQuery("<div id='"+layerel+"'></div>")
  .insertAfter(element)
  .nextAll().appendTo("#"+layerel)
  .parent().css(cssProps);
 }
}

Thanks for any help!

Answer 1

Gonna have to side with mkoryak on this. Code is way over-complicating the issue.

This is how I would do it (this, of course, is totally untested):

var fade_time = 1000;
var wait_time = 15000;
var curr = 0;
var last = 41;
var bg = $("#background");

function do_fade() {
    curr++;
    if (curr > last) {
        curr = 1;
    }
    bg.fadeOut( fade_time, function() {
        // switch your image here. something like this
        bg.css('background-image','./images/background/image_' + curr + '.jpg');
        bg.fadeIn( fade_time );
    }
}

id = setInterval( do_fade, wait_time );

Hopefully this works for you.