jQuery opacity animation

javascript jquery jquery-animate opacity
xsznix picture xsznix · Aug 2, 2010 · Viewed 73.9k times · Source

I am making a website, and it allows users to change view options. I use jQuery to smooth animations for font changing. It fades the whole page out and back in again with the new fonts.

The fade out animation is fine, but when it fades back in, there's no fade. It just pops up, no animation.

The problematic jQuery is in http://xsznix.my3gb.com/options.php.

The code I have so far is this:

$('#font-classic').click(function(){
    $(document.body).animate({opacity: '0%'},{duration: 1000, complete: function(){
        // font changing code here
        $(document.body).animate({opacity: '100%'}, 1000);
    }});
});

Answer

user113716 picture user113716 · Aug 2, 2010

jQuery's .animate() takes values from 0 to 1.

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

I'm sure that .animate() must call .parseFloat() (or something) on the values you're passing, which would make your 0% into 0 (which is correct), but your 100% into 100, which would be incorrect.

Related questions

jQuery animate backgroundColor

I am trying to animate a change in backgroundColor using jQuery on mouseover. I have checked some example and I seem to have it right, it works with other properties like fontSize, but with backgroundColor I get and "Invalid Property" …

Read More
animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More