title: Change opacity during slideDown function
body: <p>I have and  object with these css parameters:</p>
  
  <pre><code> position:fixed;
   top:0px;
   left:25%;
   width:50%;
   height: 300px;
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright: 0px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-radius: 0px 0px 10px 10px;
   border-radius: 0px 0px 10px 10px;
   display:none;
   background: -moz-linear-gradient(
          top,
          #807980 0%,
          #3d323d);
   background: -webkit-gradient(
          linear, left top, left bottom, 
          from(#807980),
          to(#3d323d));
   -webkit-box-shadow: 0px 0px 10px rgba(46, 50, 50, 1);
   -moz-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
   -o-box-shadow:    0px 0px 10px rgba(46, 50, 50, 1);
   box-shadow:         0px 0px 10px rgba(46, 50, 50, 1);
   opacity: 0.2;
  </code></pre>
  
  <p>And I have this javascript which I'm using to slide down and slide up this div:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
   $(document).ready(function(){
   $('#main_div').click(function(){
   $('#slide_down').slideToggle(2000);
   });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>Before I made this slide down with css3, hover and transition and I was changing opacity of the object in css, but now when I'm using javascript instead to slide it down. Is there any chance to change object opacity from 0.2 to 0.8 during sliding down? So it create very nice effect? Thank you.</p>