Using jQuery .animate() instead of .css()

Question

So here is my app.js

$(document).ready(function() {
var cnt=0, bg;
var $body = $('body');
var arr = ['http://www.writerscentre.com.au/wp-content/uploads/2013/12/Writing-Picture-Books-grid.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
var anim;
var bgrotater = setInterval(function() {
    if (cnt==5) cnt=0;
    bg = 'url("' + arr[cnt] + '")';
    cnt++;
    $body.css('background-image', bg);
   /* $body.animate({
        background-image = bg;
    },200)
    */

}, 1000);


 });

the $body.css works fine but can i get this to work with .animate()

Answer 1

animate takes an object but you are defining the property like you define a variable.

Also due to the dash you need quotes around the property key.

background-image = bg;

Should be

"background-image": bg

The background image will not fade in and out though, it takes a lot more to do that, and animating opacity will fade in and out the element not the background.

There is a plugin that probably will help you do what you want see: Vegas Background