I added a background to header part of my site and I want to show and hide some images on it to create an animation there using jQuery. I created the necessary divs in header.php and added this to avia.js:
window.setInterval(function() {
var y4ImageFullPath = jQuery("#y4fg").css("background-image");
var y4Image = y4ImageFullPath.substr(y4ImageFullPath.lastIndexOf('/')+1,3);
switch(y4Image)
{
case 'fg1';
var newImage = 'url('+y4ImageFullDir+'fg2.png)';
break;
case 'fg2';
var newImage = 'url('+y4ImageFullDir+'fg3.png)';
break;
case 'fg3';
var newImage = 'url('+y4ImageFullDir+'fg1.png)';
break;
}
jQuery("#y4fg").fadeOut('fast', function() {
jQuery("#y4fg").css("background-image", newImage);
jQuery("#y4fg").fadeIn('fast');
});
}, 5000);
But my setInterval function never seem to trigger the function defined in it. Is there something I am missing?














