How to rewrite simple effects fadeIn(), fadeOut(), slideUp(), slideDown() using animate({ })?

Question

I cannot understand why it doesn't work now, I write:

$(function() {
 $('a').click(function(){
  $('div#box').animate({
   opacity: 1
  });
 });
});

div { width: 250px; height: 250px; background-color: #000040; display: none; }

and it doesn't fadeIn(). How to do these simple things? Thank you very much)

Answer 1

EDIT: While the below works, looking at the jQuery source reveals that this is much easier:

$(function() {
    $('a').click(function(){
        $('#box').animate({
            opacity: "show"
        });
        return false;
    });
});

Here is the relevant part of the jQuery source, that defines these slideDown/Up/Toggle and fadeIn/Out functions:

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx("show", 1),
    slideUp: genFx("hide", 1),
    slideToggle: genFx("toggle", 1),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" }
}, function( name, props ){
    jQuery.fn[ name ] = function( speed, callback ){
     return this.animate( props, speed, callback );
    };
});

---

The CSS rule "display: none" doesn't mean it is transparent, it means it is not displayed at all. You need to set display to block, then animate. You probably want to return false in the click function, so that the link doesn't end up taking the user to another page (or you can just set the href attribute to "#", which you may already be doing).

$(function() {
    $('a').click(function(){
        $('#box').css('opacity', '0');
        $('#box').css('display', 'block');
        $('#box').animate({
            opacity: 1
        });
        return false;
    });
});