Jquery animate negative top and back to 0 - starts messing up after 3rd click
        Posted  
        
            by 
                Daniel Takyi
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Daniel Takyi
        
        
        
        Published on 2012-10-20T10:26:20Z
        Indexed on 
            2012/10/20
            11:01 UTC
        
        
        Read the original article
        Hit count: 249
        
The site in question is this one:
http://www.pickmixmagazine.com/wordpress/
When you click on one of the posts (any of the boxes) an iframe will slide down from the top with the content in it. Once the "Home" button in the top left hand corner of the iframe is clicked, the iframe slides back up. This works perfectly the first 2 times, on the 3rd click on of a post, the content will slide down, but when the home button is clicked, the content slides back up normally but once it has slid all the way up to the position it should be in, the iframe drops straight back down to where it was before the home button was clicked, I click it again and then it works.
Here is the code I've used for both sliding up and sliding down functions:
/* slide down function */
var $div = $('iframe.primary');
var height = $div.height();
var width = parseInt($div.width());
$div.css({ height : height });
$div.css('top', -($div.width()));
$('.post').click(function () {
      $('iframe.primary').load(function(){
            $div.animate({ top: 0 }, { duration: 1000 });
      })
      return false;
 });
 /* slide Up function */
 var elm = parent.document.getElementsByTagName('iframe')[0];
 var jelm = $(elm);//convert to jQuery Element
 var htmlElm = jelm[0];//convert to HTML Element
 $('.homebtn').click(function(){
      $(elm).animate({ top: -height }, { duration: 1000 });
      return false;
 })
        © Stack Overflow or respective owner