Creating a link to close an element that fades in with jQuery?

I created a notification at the top of the page that fades in:

HTML/PHP:

<?php if ( ! is_user_logged_in() ) : ?>
    <div class="notification">
        <span><?php _e( 'Welcome to Taiwantalk' ); ?></span>
    </div><!-- #container -->       
<开发者_如何学运维;?php endif; ?> 

CSS:

   .notification {
        background-color: #444;
        color: #FFF;
        height: 0;
        opacity: 0;
        padding: 8px 0 0;
    }

JS:

var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j(".notification").animate({
    height: "22px",
    opacity: 1
  }, 1000 );

});

Now I would like to create a button at the right that closes the div with the same animation that it was used to make it fade in.

Any suggestions of how to accomplish this?

Practically the same thing as you already have. Just set height to 0px instead and opacity to 0. Assuming you want it to slide up and fade out. If you just want it to fade out then set opacity to 0. You can also use the jQuery fadeIn/fadeOut methods.

<input type="button" value="click" id="mybutton" />

//note that $j is relevant to the asker's code example. Typically jQuery just uses $. 
//See Roxon's answer for an example.
var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j(".notification").animate({
    height: "22px",
    opacity: 1
  }, 1000 );

  $j("#mybutton").click( function() {
    $j(".notification").animate({
      height: "0px",
      opacity: 0
    }, 1000 );
  });

});

If you want the same animation, just use the original values in .animate.

$('#close').click(function() {
    $(".notification").animate({
        height: "0px",
        opacity: 0
    }, 1000);
});

Demo: http://jsfiddle.net/Xzzra/

FIDDLE DEMO

var $j = jQuery.noConflict();

$j(document).ready(function($) {


    var notifiH = $j('.notification').height();
    $('.notification').animate({top:'0px', opacity:1},1000);
    $('.notification_close').click(function(){
        $('.notification').animate({ top:'-'+notifiH, opacity:0},1000);
    });


});

I would animate toggle a class instead of setting the height and opacity. You could do this on the document ready event as well. This allows you to keep your style separated from your functionality.

Something like this:

$( "#close_button" ).click(function() {
        $( ".notification").toggleClass( "notificationVisible", 1000 );
        return false;
    });

and in your css, just have this:

.notificationVisible { height: 22px; opactiy: 1; }