$('.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.
