[jQuery] Advanced jQuery Animation Problem

[OscarGodson]

This is a fairly advanced jQuery animation I am doing on a site I am doing,
but I know it's failing at alert('2'); as you will see it in the comments. I
have tried TONS of things and nothing is working, but it's only not working
after a user pushes the back button. The entire thing totally tweaks out. I
heavily commented it so you know what and why I am doing things.

Here is a link to just this part of the sandbox for this. Right now, you
will see the splat logo and the info for oscargodson.com no matter what you
choose, THIS IS NORMAL
. I was doing that for testing. I just want it so a user can choose an
image, go back, choose another, go back, etc.

http://oscargodson.com/labs/boozker/sites.php

P.S. I haven't even looked at this in IE7 yet :wistle:
So use Firefox or Safari to see what i see

$('.site_thumbs').siblings('div').css({display:'none'});
        $('.site_thumbs img').mousedown(function(){
                //Add a class to what was clicked so we can get it again.
                $(this).addClass('clicked');
                //We need the alt text to tell us which DIV to unhide later.
                var clicked_element = $(this).attr('alt');
                //Get Positioning and Height Info so we can save things the way 
they are
                //when we set it position:absolute which has no height 
associated with it
                //nor will it stay in place, so get the info and hard code it 
to the
element.
                var position        = $('.clicked').position()
                var positionLeft    = position.left;
                var positionTop     = position.top;
                var containerHeight = $('#content_container').height();
                
                //Now lets get that clicked element's siblings and animate them 
out with
opacity
                //alert('1');
                $(this).siblings('img').fadeOut(400,function(){
                        //alert('2');
                        //!!!ERROR!!!
                        //Now that we faded out the sibling images let's get 
rid of them
                        //$(this).css({position:'absolute'});
                        //Let's get the height we set above and hard code it so 
it wont collapse
on us.
                        
$('#content_container').css({height:+containerHeight+'px'});
                        //OK, get x,y coordinates(positionLeft,positionTop) and 
hard code them.
                        //After that animate to coordinates of the first image 
(40px,15px)
                
$('.clicked').css({position:'absolute',left:+positionLeft+'px',top:+positionTop+'px'}).animate({left:'40px',top:'15px'},300,'easeInOutBack',function(){
                                //alert('3');
                                //Fade out the thumbnail an get the content 
ready.
                                $(this).fadeOut(300,function(){
                                        //alert('4');
                                        //Get the new height of the container 
with the content in it for later
use
                                        var bodyCopyHeight = 
$('.site_'+clicked_element).height(); 
                                        //Change the height to fit the new 
content plus add some padding on the
bottom
                                
$('#content_container').animate({height:(bodyCopyHeight+5)+'px'},700,'easeOutBounce');
                                        //Show the corresponding div that is 
hidden
                                        $('.site_'+clicked_element).fadeIn(400);
                                        //Create the goback function
                                        $('.goback').click(function(){
                                                //alert('5');
                                                //Since the .goback span is 
inside the div you want to hide, we want
the span's parent div
                                                
$(this).parent('div').fadeOut(600,function(){
                                                        //After it fades out 
animate the height change which makes the height
back to the
                                                        //way it was from the 
start
                                                
$('#content_container').animate({height:containerHeight+'px'},500,function(){
                                                                //Make the 
clicked element positioned back to static so it's back in
the same spot again
                                                                
$('.clicked').css({position:'static'});
                                                                //After the 
.clicked element is back in place fade in the thumbnails
again
                                                                $('.site_thumbs 
img').fadeIn(1000,function(){
                                                                        //After 
they appear take off the clicked class so now everything is
back to normal.
                                                                        
$('#content_container').removeClass('clicked');
                                                                });
                                                        });
                                                });
                                        });
                                });
                        });
                });
        });
-- 
View this message in context: 
http://www.nabble.com/Advanced-jQuery-Animation-Problem-tp20259541s27240p20259541.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.