Databases
StackOverflow2013
Postsdbo
POAnimation not firing on jQuery slide correctly first time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimation not firing on jQuery slide correctly first time
    text
    copied!<p>I am having an issue that is stumping me. I have a relatively simple slider with three divs. When I click through to the second div the first time, the third div overlaps the first (even though the inspected CSS shows that it shouldn't be there). This happens in every browser I've tested on from Safari 5.1, Chrome 10.x and FireFox 4.0.1. Subsequent animations seem to work fine, browsing back and forth. Why would it work incorrectly on first load? My code seems to be correct. Is it a bug?</p> <p>There is a lot of animations happening on this page at once. After browsing back and forth through the "tabs", the animation (roundabout plugin) breaks. This also seems to be happening randomly.</p> <p><a href="http://beta.vulytrampolines.com/" rel="nofollow">This</a> is the page in question.</p> <pre><code> $(".overview").click( function() { $("#overview").animate({ left: '0' }, { queue: false, duration: 600 }, 'easeOutBack') $("#keynote").animate({ left: '1000px' }, { queue: false, duration: 600 }, 'easeOutBack') $("#comparison").animate({ left: '2000px' }, { queue: false, duration: 600 }, 'easeOutBack') return false; }); $(".keynote").click( function() { $("#overview").animate({ left: '-1000px' }, { queue: false, duration: 600 }, 'easeOutBack') $("#keynote").removeClass("hidden").animate({ left: '0' }, { queue: false, duration: 600 }, 'easeOutBack') $("#comparison").animate({ left: '1000px' }, { queue: false, duration: 600 }, 'easeOutBack') return false; }); $(".comparison").click( function() { $("#overview").animate({ left: '-2000px' }, { queue: false, duration: 600 }, 'easeOutBack') $("#keynote").removeClass("hidden").animate({ left: '-1000px' }, { queue: false, duration: 600 }, 'easeOutBack') $("#comparison").removeClass("hidden").animate({ left: '0' }, { queue: false, duration: 600 }, 'easeOutBack') return false; }); </code></pre> <p>(the easing doesn't seem to work either - so that's really three problems in one).</p> <p>UPDATE: Fixed it myself. See answer below.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload