Question

animImage('history_main_image.png');
function animImage(img) {
    $('#slider').delay(3000).animate({opacity: 0}, 'slow', function(img) {$('#slider').css('background-image','url(images/' + img +')').animate({opacity: 1});});
}

i have made it a function to animate the background in the slider element.but it doesn’t work.when i check the output in chrome’s inspect element option.it shows background-image:images/undefined

Answer 1

The callback you pass to animate() takes an img argument and uses it to build an URL to the background image. That won’t work, because animate() does not pass any argument to your callback.

Instead, you can remove that argument and use the img argument originally passed to animImage(). That variable exists in the caller’s scope, so it will be captured and accessible inside your callback:

function animImage(img)
{
    $('#slider').delay(3000).animate({opacity: 0}, 'slow', function() {
        $('#slider').css('background-image', 'url(images/' + img +')')
                    .animate({opacity: 1});
    });
}