I've written a bunch of jQuery stuff to help my friend out with his online portfolio which can be found here: http://bradleyrogerson.com/ (for reference of what I am about to describe).
Here is also a direct link to the javascript: http://bradleyrogerson.com/static/js/actions-take2.js
It is a rather long file, so it's probably best if I do not put it all in a code block on Stack Overflow directly.
The problem itself is pretty simple, and you can easily see broken animation on the site (link above).
Essentially my hideProject()
function which basically hides the project and then slides the original overview of all his projects back into view is firing 4 times for a reason I simply cannot find.
The key issue with this is that in the last callback of the animations taking place, I animate the scrollLeft
property of the body
& html
element so that is visually slides back to where you had left off before going to the 'more info` view.
Because the animation is firing 4 times, there is about a 1.2 second window in which time the viewport is animated which effectively breaks the ability to scroll right during that time.
This can easily be reproduced by going to his site right now and clicking on the image furthest to the right (horizontal scroll page layout), then once you've viewed the 开发者_开发知识库project simply click one of the images to trigger the hideProject()
function and once the viewport has animated as far as it can go try immediately scrolling to the left.
You'll notice that you won't be able to with the animation still firing pushing your attempts to go left out the window forcing the scrollLeft
value upon you again and again (4 times).
I have commented the javascript file very well (at least I think so) so it should be pretty easy to read and understand once opened.
I would really appreciate an answer to the issue, how to fix it but most importantly some advice on why it broke in the first place so I can learn from this and not make this mistake again.
Many thanks for reading.
Jannis
Note: the function in question (at least I think this is the cause) is on line 212
in this file.
After adding breakpoints, I can only see this function firing twice, once because you bound it to a click event for the element #project-media, the other because you bound it to the hashchange() event. Just make the click event trigger a hashchange() instead of calling hideProject() or simply remove the binding altogether. The binding is made on line 331.
精彩评论