title: trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click
body: <p>basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.</p>
  
  <pre><code>$(document).ready(function(){
      var orig = $(".dropDown").outerHeight(); // 104
      var top = $(".dropDown").css("top");
  if(top == "0px"){
      $(".selector").on("click", function(e){
          $(".dropDown").animate({top : "-100px"}, 400, 
              function(){
  var top = $(".dropDown").css("top");
  alert(top);                 
          })
      })
  }
  // else{
  //  $(".selector").on("click", function(e){
  //      $(".dropDown").animate({top : "0px"}, 400);
  //      $("body").css({"background-color" : "green"})
  //  })
  // }
  if($(".dropDown").css("top") == "-100px"){
      $(".selector").on("click", function(e){
          $(".dropDown").animate({top : "0px"}, 400);
          $("body").css({"background-color" : "green"})
  
      })
  }
  
  });
  </code></pre>
  
  <p>logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0. </p>
  
  <p>Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.</p>
  
  <p>while I was setting up the <a href="http://jsfiddle.net/XUwN5/" rel="nofollow">jsfiddle</a> I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.</p>