$('.clicked').removeClass('clicked');
That's what I added late last night after I sent this. I actually knew about this before I sent a message on here and totally forgot to undo my tests all the way. You can view the code now which will have: $('.site_thumbs img').fadeIn(1000,function(){ //After they appear take off the clicked class so now everything is back to normal. $('img.clicked').removeClass('clicked'); }); But the strangest thing happens. If you click on once on any thumb, it works, but once you have clicked the image twice all of a sudden it wont work anymore. There is no class set to it, so I don't know why It would matter. weidc wrote: > > > hi, > > it seems like it doesn't remove the 'clicked' class. > if i remove the class manually it works again. > > what about: > $('#content_container img').removeClass('clicked'); > > or: > $('.site_thumbs').children('img').removeClass('clicked'); > or: > $('.clicked').removeClass('clicked'); > > don't know. something like that. > > -weidc > > On 31 Okt., 07:13, Omid S <[EMAIL PROTECTED]> wrote: >> wow, I cant say much about your code, but your page looks awesome. >> >> On Oct 30, 8:13 pm, OscarGodson <[EMAIL PROTECTED]> 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. > > -- View this message in context: http://www.nabble.com/Advanced-jQuery-Animation-Problem-tp20259541s27240p20269347.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.