Исправление div в определенной позиции с отрицательным полем и его анимация позже при нажатии кнопки.

У меня как-то сложная ситуация:

Вот скрипка, чтобы попытаться объяснить это: http://jsfiddle.net/sqSj9/1/

Я хочу сделать три div на фиксированных позициях с отрицательным краем - слева, сверху и справа (так скрыто), и как только я нажимаю на кнопку, они должны появляться анимированным способом до середины стр. Я начал делать это в отдельной папке, чтобы попробовать, и он работал отлично. и я получил результат, который вы можете видеть в скрипке (так что да, скрипка - это то, что я хочу выполнить)

Но как только я поместил код в свой код веб-сайта, сначала ничего не появилось при щелчке, поэтому анимация не работала.

когда я удалил position:fixed анимация начала появляться, но divs, которые появились, подтолкнули div, который позади, так что скажем в скрипке: белый div подтолкнул серый div к нижней части, вместо того чтобы скрывать его.

Поэтому моим последним решением было поставить position:absolute. когда я это сделал, анимация работала правильно, но дело в том, что теперь, когда я нажимаю кнопку, divs анимируются, но не заполняют размер моего браузера, а это значит, что, скажем, я немного прокрутил больше, когда я нажимаю кнопку для анимации, происходит анимация, но я ее не вижу. Мне нужно снова прокрутиться, чтобы увидеть это.

Вот еще одна скрипка, чтобы показать, что я имею в виду. прокрутите вниз и попробуйте: http://jsfiddle.net/6xJhC/3/

Поэтому я уверен, что что-то не так с моим исходным кодом, чего я не должен был добавлять, но я просто не могу понять, что это такое! Вот соответствующие части моего кода:

Мой html:

 <?php include 'header.php';?>

    <!-- this is where the header ends and index starts-->
        <div id="container">
    <div id="intro">
       <!-- some content-->
    </div>

    <div id="content">
      <section id="def">    
         <!-- some content-->
      </section>

      <div id="selected-program">
          <div id="top">  
              <!-- some content-->
          </div>

          <div id="left">
              <!-- some content-->
          </div>

          <div id="right">
              <!-- some content-->
          </div>
     </div>

     <section id="program">
        <button id="click" value="click Me"> click me </button>
        <!-- some content-->
     </section>

     <section id="rec">
        <!-- some content-->
     </section>

     <section id="testi">
        <!-- some content-->
     </section>

     <section id="contact">
         <!-- some content-->
     </section>


<?php include 'footer.php';?>

Мои js:

<script type="text/javascript">

$(document).ready(function(){
    var allowScroll = true;

$("body").on('mousewheel DOMMouseScroll',function(e){   // this code prevents scrolling whenever the button is clicked is clicked
    if (!allowScroll){
        e.preventDefault();
    }
});
$("#click").click(function(){
    $("#top").animate({marginTop:'0px'},200);
    $("#left").animate({marginLeft:'0px'},200);
    $("#right").animate({marginRight:'0px'},200);
});
});
</script>

Мой css:

body, html{
    margin:0;
    padding:0;
    background: #fff;
    margin-bottom: 25px;
    overflow-x: hidden;
}

#container{
    padding-top:80px;
}

#intro{
    background:url(images/main.jpg) no-repeat;
    background-size: cover;
    height:492px;
    color: #fff;
    position:fixed;
    z-index: 0;
    width:100%;
}

#content{
    z-index: 600;
    position: relative;
    margin-top: 492px;
    background: #fff;
}

#program {
    height:700px;
}

#rec{
    height:140px;
    background: #f6f6f6;
}

#recommand{
    width:490px;
    padding-top:20px;
    margin:auto;
    height:100px;
}

#testi {
    height:700px;
}

section{
    border-bottom:1px solid;
    border-color:#eee;
    padding-left:130px;
}

#selected-program{
    z-index: 100000;
}

#top{
    width:100%;
    height:80px;
    margin-top:-120px;     
    background: #f6f6f6;
    position:absolute;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

#left{
    left:0%;
    margin-left:-859px;
    padding-left:130px;
    padding-top:30px;
    width:860px;
    height:603px;
    margin-top:80px;
    float:left;
    position:absolute;
    background:#fff;
}

#right{
    right:0%;
    margin-right:-449px;
    float:right;
    height:633px;
    width:449px;
    margin-top:80px;
    border-left:1px solid #eee;
    position:absolute;
    background: #fff;
}

Поэтому любая помощь будет принята с благодарностью.

Заранее спасибо.