CODEWITHSUNDEEP
jquerycss
Gazillion
Gazillion

Reputation: 4812

How to animate the background opacity of an element using jQuery?

I have a picture as a background on my HTML tag and a background colour of rgba( 0,0,0, 0.7 ); on my BODY tag. I'm building a small script that will allow me to change the background image on the fly and to do this I would like to animate the body to be rgba( 0,0,0,1 ), change the image, and then animate back to the opacity of 0.7.

I've googled and found that a jQuery plugin called jQuery Color but the plugin seems to be broken in the latest version of jQuery "b.end is undefined". Others who have asked a similar questions also have answered with comments saying that this solution no longer works.

I'm a little at a loss, all googling leads to the same plugin, does anyone else know of a solution?

Currently this is what I'm trying:

jQuery('body').animate({
    'backgroundColor':'rgba(0, 0, 0, 1)'
});

Thanks for any help :)

Upvotes: 1

Views: 3239

Answers (3)

Ennui
Ennui

Reputation: 10190

jQuery UI can do this out of the box (so all you need is jQuery and jQuery UI).

You almost had it. Add the jQuery UI script call in the head after your jQuery script call (<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>) and then try this:

jQuery('body').animate({
    backgroundColor: 'rgba(0, 0, 0, 1)'
});

backgroundColor is the jQuery property name, which does not need to be in quotes. Quotes are only needed for CSS properties that have dissimilar corresponding jQuery property names, which would be background-color (the CSS property that backgroundColor stands for). So this would also work:

jQuery('body').animate({
    'background-color': 'rgba(0, 0, 0, 1)'
});

This can also be accomplished quite simply with pure CSS3 animations.

Upvotes: 4

ntgCleaner
ntgCleaner

Reputation: 5985

I haven't finished this code, but this is the basis for pure jQuery. It's a start to an idea for you. Try something like this:

$('.background').click(function(){
    var changeColor;
    var speed = 100;
    var i = speed;
    changeColor = setInterval(function(){
        i--;
        var opacity = i / speed;
        $('.background').css({backgroundColor: "rgba(0,0,0, " + opacity + ")"});
    }, 1);
    setTimeout(function(speed){
        clearInterval(changeColor);
     }, speed * 5);

});

The basic principle is to change a number every 1ms which would then control a percentage that would act as a variable for your background color. This is not efficient, but it's exactly the thought you're looking for.

UPDATE Check the fiddle here: http://jsfiddle.net/mV4st/3/

Upvotes: 0

Hernandcb
Hernandcb

Reputation: 539

In this question you can find a way to do it:

$(document.body).animate({opacity: 1}, 1000);

Upvotes: -1

Related Questions