Change data-image attribut via jQuery

I automatically change the image of a div with the data-image attribute via jQuery. Here is my jQuery:

$(document).ready(function () {
        var img_array = [1, 2],
            newIndex = 0,
            index = 0,
            interval = 5000;

        (function changeBg() {
            index = (index + 1) % img_array.length;

            $('#backgroundimg').attr('data-image', function () {
                $('#backgroundimg').animate({
                    backgroundColor: 'transparent'
                }, 1000, function () {
                    setTimeout(function () {
                        $('#backgroundimg').animate({
                            backgroundColor: 'rgb(255,255,255)'
                        }, 1000);
                    }, 3000);
                });
                return 'http://ift.tt/1Jyawnr'+img_array[index]+'.jpg';
            });
            setTimeout(changeBg, interval);
        })();
});

and here is my div:

<div id="backgroundimg" ></div>

When I inspect the element, I am able to see that the data-image changes, but I can't see the image. What am I doing wrong here?

Here's the fiddle: http://ift.tt/1H8Lcqo

I appreciate any help and hints!

Kindly

Eric