0

I'm a total amateur at jQuery, HTML, css and everything and I'd be really grateful if anyone with some more knowledge could help me. This is a site I'm in the middle of making for my girlfriend: www.sharyncunneen.com.

If you click around on the buttons there you'll notice I've done some animated page transitions involving the opacity, size and position of the buttons. The problem is when I click the browser back button: if I click it at a reasonably slow pace the transitions still work fine but if I click several times fast in a row it's like the jQuery/javascript doesn't get time to catch up or something. I don't really know.

Do you need to see files or code? I won't include anything else yet. I think it's better to let you tell me what information would help you because I'm not sure about the best way to proceed on this forum and I'd like to learn from experienced users.

David
  • 8,340
  • 7
  • 49
  • 71
  • With what browser did you do your testing? It seems to run just fine on my old laptop (i5 M520, 3 Gig RAM) in Chrome. – MCL Feb 08 '13 at 12:33
  • Also no issues on Firefox – Sven Bieder Feb 08 '13 at 12:50
  • No issues on FF, Chrome, but IE 9 has it.I don't know if that can be worked around. – beerwin Feb 08 '13 at 12:57
  • Sorry! Should've been more specific. I haven't even thought about the IE problem yet. My problem is with a less noticeable problem all the other main browsers (Chrome, FF, Opera and Safari):if you start at the home page, the opacity on the buttons is 1. Then if you click your way around a bit it they change. So far that's all okay and by design. If you then hit the back button quickly to get back at the home page the opacities are not back at 1. But this only happens when you hit 'back' quite fast. –  Feb 08 '13 at 19:03
  • (My manners!) Thank you for your replies! –  Feb 08 '13 at 19:04

1 Answers1

0

I don't see any transition at all o0 Anyway, you can use the jquery queue function. Start a queue when starting the animation et clear it when your transition is finished. You can also limit the number of queued events to avoid the website getting crazy with speedy click.

Jean-Georges
  • 658
  • 4
  • 12
  • Thanks for your feed back, Jean-Georges. I've just been researching how queuing works in jQuery after reading your suggestions earlier. I'd never looked into it as I'm mostly just learning what I need as I need it. That sounds promising. I'll let you know how it works out. –  Feb 08 '13 at 23:13
  • 1
    It's actually simple. You put your whole function a in queue : $(document).queue(function(){ //do some stuff }); and when the program is ready to repeat the code, you do $(document).clearQueue() or whatever the method is, can't remember. – Jean-Georges Feb 09 '13 at 07:29
  • Actually, I'm starting to understand that my question was a bit immature. While researching how jQuery queue functionality works I realised how much I have to learn. I think I have to find out about promise objects and deferred objects and stuff like that. Thank you all. I'll be back when I know a bit more! –  Feb 10 '13 at 00:11
  • Thanks again, Jean-Georges. I ended up using $("#element:animated").stop("true") before animating any elements and everything seems to be working for now. The stop() method is like clearQueue() but specially belonging to the fx queue. Your tip sent me in the right direction for researching. –  Feb 12 '13 at 01:32
  • Glad it helped. Don't forget to validate the answer for other users who might have the same problem ;) – Jean-Georges Feb 12 '13 at 08:41
  • Oops. I just got back to this now and read your 'validate the answer' bit. Like I said, I'm learning. Thank you again. :) –  Mar 23 '13 at 04:20