A simple solution would be: function forwardClick() { var i = $('#images .visible').attr('id'); var currentImg = $('#images .foo:eq(' + i + ')'); var nextImg = $('#images .foo:eq(' + j + ')'); var currentDesc = $('#descriptions .bar:eq(' + i + ')'); var nextDesc = $('#descriptions .bar:eq(' + j + ')');
currentImg.animate( { marginLeft: left }, 300, function () { $ (this).removeClass('visible'); } ); nextImg.css('margin-left', '240px').addClass('visible').animate ( { marginLeft: "0" }, 300 ); currentDesc.animate( { marginLeft: descLeft }, 300, function() { $ (this).removeClass('visible'); } ); nextDesc.css('margin-left', descRight).addClass('visible').animate ( {marginLeft: "0" }, 300 ); i += 1; j += 1; k += 1; if (i > length - 1) { i = 0; } if (j > length - 1) { j = 0; } if (k > length - 1) { k = 0; } $('#forward').bind("click", function() { $('#forward').unbind("click"); forwardClick(); }; } $('#forward').click( function() { $('#forward').unbind("click"); forwardClick(); }); But I'm sure there's a better way to do it... On Apr 24, 10:39 am, roryreiff <roryre...@gmail.com> wrote: > Hello there, > > I have created a simply navigable image gallery with a bit of json, as > well as .animate() and altering the margin of elements. Currently, I > am pulling in the 5 most recent images with a tag of 'spock' from > flickr. It seems to be working fine, except that when clicking through > very fast it gets a bit wonky. I am also really curious as to opinions > on better ways of doing this? Perhaps there is a way that relies upon > the json instead of simply just injecting it into the dom right off > the bat? > > The basic strategy I employed was to animate the current image off the > stage, and then make it invisibe, while also animating the next image > onto the stage after making it visible. I have a feeling it's these > queued effects/animations that aren't dealing so well with fast > clicks. Perhaps the best way to solve this is limit when/how the > arrows can be clicked? > > Any help is greatly appreciated. Thanks! > > example:http://www.pomona.edu/dev/spock/index.asp > > js:http://www.pomona.edu/dev/spock/spock-feed.js