jquery fadeTo chain not working
<p>The first part of my chains tied to the <code>.click()</code> events: <code>slideDown()</code> works however the <code>fadeTo()</code> portion does not.</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

&lt;script&gt;

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

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

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

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

    });

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

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

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

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

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

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

        $('.menu_item_content').prepend('&lt;div class="menu_box" id="twitter_box"&gt;Twitter&lt;/div&gt;');

        $('#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();   
    });
});




&lt;/script&gt;

&lt;style&gt;

.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;
}

&lt;/style&gt;

&lt;div class="menu"&gt;
    &lt;div class="menu_items"&gt;
        &lt;div class="menu_item" id="contact"&gt;CONTACT&lt;/div&gt;
        &lt;div class="menu_spacer"&gt;/&lt;/div&gt;
        &lt;div class="menu_item" id="about"&gt;ABOUT&lt;/div&gt;
        &lt;div class="menu_spacer"&gt;/&lt;/div&gt;
        &lt;div class="menu_item" id="twitter"&gt;TWITTER&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="menu_item_content"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
