jQuery Opacity Animate
<p>Okay, my objective is to have a user click on a div and have another div's opacity change from 0 to 1,but its not really working out. </p>

<pre><code>HTML
    &lt;div id="container"&gt;

    &lt;div id="middlebottom"&gt;&lt;div id="portfolio"&gt;Portfolio&lt;/div&gt;&lt;/div&gt;



    &lt;/div&gt;

    &lt;div id="portfoliocontainer"&gt; &lt;/div&gt;



JQUERY        
    $('#middlebottom').click(function() {
      $('#portfoliocontainer').animate({
        opacity: 1.0;
      });
    });


CSS
    #portfoliocontainer {
    height: 0%;
    width: 100%;
    top: 0;
    position: absolute;
    background-color: #FF2D2D;
    opacity:0;
    filter:alpha(opacity=0); }

    #portfolio {
    margin: 30px; }

    #middlebottom {
    width: 40%;
    height: 30%;
    background-color: #FF2D2D;
    position: absolute;
    left: 40%;
    bottom: 0;
    -webkit-transition-duration: .7s;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: bold;
    text-transform: normal;
    letter-spacing: -2px;
    line-height: 1.2em;
    color: #FF9898; }
</code></pre>

<p>I'm a newbie at jQuery, so I'm not really sure what's gone wrong. I think I've got it right, but it doesn't work. </p>
