jquery fadeTo chain not working

The first part of my chains tied to the .click() events: slideDown() works however the fadeTo() portion does not.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function()
{
    $('#contact').click(function() 
    {

        $('#contact_box').remove();

        $('.menu_item_content').prepend('<div class="menu_box" id="contact_box">Contact INFO goes in this box.</div>');

        $('#contact_box').slideDown('slow', function()
        {
            $(this).fadeTo( 'slow', 1, function()
            {
            });
        });

    开发者_运维技巧});

    $('#about').click(function() 
    {

        $('#about_box').remove();

        $('.menu_item_content').prepend('<div class="menu_box" id="about_box">About info goes in this box.</div>');

        $('#about_box').slideDown('slow', function()
        {
            $(this).fadeTo("slow", 1, function()
            {
            });
        });
    });

    $('#twitter').click(function() 
    {

        $('#twitter_box').remove();

        $('.menu_item_content').prepend('<div class="menu_box" id="twitter_box">Twitter</div>');

        $('#twitter_box').slideDown('slow', function()
        {
            $(this).fadeTo("slow", 1, function()
            {
            });
        });
    });


    //
    //remove single items
    //
    $(".menu_item_content").delegate("#contact_box", "click", function()
    { 
        $(this).remove();
        //$('#contact_box').remove(); 
    }); 


    $(".menu_item_content").delegate("#about_box", "click", function()
    {
        $(this).remove();
        //$('#about_box').remove(); 
    });

    $(".menu_item_content").delegate("#twitter_box", "click", function()
    {
        $(this).remove();
        //$('#twitter_box').remove();   
    });
});




</script>

<style>

.menu_item
{
    position:relative;

    display:inline;
    font-family:Tahoma;
    font-size:20px;
}
.menu_spacer
{
    display:inline;
    font-family:Tahoma;
    font-size:45px;
}

.menu_box
{
    display:none;
}

</style>

<div class="menu">
    <div class="menu_items">
        <div class="menu_item" id="contact">CONTACT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="about">ABOUT</div>
        <div class="menu_spacer">/</div>
        <div class="menu_item" id="twitter">TWITTER</div>
    </div>

    <div class="menu_item_content">
    </div>
</div>

---

it does not work

is maybe the worst of all error descriptions. However, what do you expect to happen here?

$('#twitter_box').slideDown('slow', function()
    {
        $(this).fadeTo("slow", 1, function()
        {
        });
    });

This will slide down #twitter_box and after that, it will fade it to opacity 1 (100%) which it already should be. .slideDown() will show an element (100% opacity), conclusion: .fadeTo() trys to fade from 100% to 100% = no effect at all.

.fadeTo() expects a value from 0.01 to 1.00.