ansaurus

Question

Answer 1

+2 A:

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

$('#font-classic').click(function(){
    $('body').fadeOut('normal', function(){
        $('body').fadeIn();
    }});
});

Jacob Relkin 2010-08-02 17:52:10

I guess I could, but I really don't want to redo my brackets again... because I am just that lazy.

xsznix 2010-08-02 17:59:53

@xsznix, it's much cleaner as well. `animate` is meant for **custom** animations.

Jacob Relkin 2010-08-02 18:06:48

I guess you're right, I'll do that.

xsznix 2010-08-02 18:18:14

Answer 2

+1 A:

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.

patrick dw 2010-08-02 17:54:46

it worked! yay!

xsznix 2010-08-02 17:58:29

@xsznix - FYI `.animate()` is "meant" for whatever animation you want. There's no rule about custom vs non-custom (whatever that means). When you call `.fadeOut()` it is *directly* calling `.animate()`, so you're just a step abstracted from it. Use whichever you prefer, and don't be influenced by people who make up arbitrary rules. :o)

patrick dw 2010-08-02 19:36:59

I get that... just .animate() uses that many extra bytes. :P

xsznix 2010-08-04 20:16:37

.fadeIn()/fadeOut() is also "cleaner" and therefore that much easier to maintain.

xsznix 2010-08-04 20:17:13

@xsznix - True, you save a few bytes and spend a few processor cycles. :o) Using `fadeOut()` is nice for simple cases, but can cause issues in a situation where you need to stop and reverse the effect. (Common for `mouseenter/mouseleave` events.) It tends to lose its place, and you end up being stuck semi-transparent. Something to keep in mind if that ever happens. :o)

patrick dw 2010-08-04 21:33:46

$('#item').stop().fadeIn(); $('item').stop().fadeOut();Simple as that.How do you do inline code like that?

xsznix 2010-08-05 00:04:50

@xsznix - Here's an example of what I meant. http://jsfiddle.net/Abjq9/ Try to hover rapidly over and off the blue text. You'll see that the opacity gets stuck in the middle. Using `.animate()` solves this. You can change the code, and click **Run** at the top to test your changes. Here's the same example, but using `.animate()`.

patrick dw 2010-08-05 00:23:35

...and the inline code formatting is done by using the key above your `left tab key` at the `beginning` and `end` of the `code` you want to format. :o) (I don't know what that character is called.)

patrick dw 2010-08-05 00:27:29

Oops... forgot to paste the `.animate()` version above. http://jsfiddle.net/Abjq9/1/

patrick dw 2010-08-05 00:36:39

OK, but my website uses `fadeIn()` and `fadeOut()` so that they are always together and never broken up. Thanks for the help. http://en.wikipedia.org/wiki/%60

xsznix 2010-08-05 12:53:22

ansaurus

tags:

views:

answers:

jQuery opacity animation

related questions