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()

And what do you expect animating the background image to do? — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 7, 2014 at 17:18
@user, you would need to find (or write) a specific plugin to achieve that. Neither jQuery not jQuery UI support this feature out of the box. — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 7, 2014 at 17:21
use $body.animate({opacity:0}, 'slow', function() {$(this).animate({opacity: 1})}) for fade effect — adi rohan
– adi rohan, Commented Sep 7, 2014 at 17:22

GillesC · Accepted Answer · 2014-09-07 17:27:22Z

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

edited Sep 7, 2014 at 17:27

answered Sep 7, 2014 at 17:22

GillesC

10.9k3 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related