[jQuery] Re: Advanced jQuery Animation Problem

wow, I cant say much about your code, but your page looks awesome.

On Oct 30, 8:13 pm, OscarGodson <Oscargod...@gmail.com> wrote:
> 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-tp20259541s27...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.