Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery opacity animation

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);     }}); }); 
like image 269
xsznix Avatar asked Aug 02 '10 17:08

xsznix


People also ask

What is opacity in jQuery?

jQuery Effect fadeTo() MethodThe fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).

How can set opacity of div in jQuery?

As theIV said you can use the css method, but as an alternative you can use animate: $('#my_element'). animate({ opacity: 0.5 }, 100); this will animate the opacity of you div (and its contents) to 0.5 (from whatever it was to begin with) in 100 milliseconds.

Is jQuery used for animation?

With jQuery, you can create custom animations.

Can you fade an element to a desired value of opacity using jQuery?

The . fadeTo() method animates the opacity of the matched elements. It is similar to the . fadeIn() method but that method unhides the element and always fades to 100% opacity.


2 Answers

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.

like image 104
user113716 Avatar answered Sep 20 '22 14:09

user113716


Why not use jQuery's built-in functions fadeIn and fadeOut?

$('#font-classic').click(function(){     $('body').fadeOut('normal', function(){         $('body').fadeIn();     }}); }); 
like image 40
Jacob Relkin Avatar answered Sep 23 '22 14:09

Jacob Relkin