StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So I edited your fiddle and I hope this is the behavior you expect. And it's also not 'jumpy' anymore like your first version.</p> <p>I created three new variables:</p> <pre><code>var hovered = false; var animating = false; var correction = null; </code></pre> <p>The first one stores whether one of the element was hovered, the second one whether the animation is running and the third stores, which correction has to be used (left or ride side).</p> <p>Than I've updated the functions to keep track of what's happening:</p> <pre><code>$carouselNext.hover(function () { if (!animating) shunt('-=20'); hovered = true; correction = 'next'; }, function () { if (!animating) shunt('+=20'); hovered = false; correction = 'next'; }); </code></pre> <p>Than I've updated the click-hanlder:</p> <pre><code>$carouselNext.bind('click', function(e) { move(0); e.preventDefault(); }); </code></pre> <p>And the <code>move()</code>-function:</p> <pre><code>function move(dir, par) { if(!animating) { animating = true; if(dir == 0) { carousel.next(); } else { carousel.prev(); } setTimeout(function() { shunt( ( hovered ? '+=0' : ( 'next' == correction ? '+' : '-' ) + '=20' ) ); animating = false; }, 1700); } } </code></pre> <p>Here is the Demo - hope you get everything I've updated.</p> <h3>DEMO</h3> <p><a href="http://jsfiddle.net/tL8PX/" rel="nofollow">jsfiddle</a></p> <p>Note: The variables from the beginning can be declared within <code>function carousel_initCallback(carousel)</code>- somehow it wasn't stored in the fiddle …</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