Smooth out a jQuery transition

Question

I have the following code:

<script> $(document).ready( function() { var middleIndex = 3; var maxIndex = $("ul li").length - 1; var minIndex = 0; $('ul#reel li').mouseover(function() { var index = $(this).parent().children().index(this); var tempIndex; var showIndex; var visibleRows = $("ul li:visible").length; if(index > middleIndex && visibleRows == 7) { tempIndex = middleIndex - 3; showIndex = middleIndex + 4; if(tempIndex <= maxIndex && showIndex <= maxIndex) { $("ul li:eq("+tempIndex+")").hide(500); $("ul li:eq("+showIndex+")").show(500); middleIndex++; } } else if(index < middleIndex) { tempIndex = middleIndex + 3; showIndex = middleIndex - 4; if(tempIndex <= maxIndex && showIndex >= minIndex) { $("ul li:eq("+tempIndex+")").hide("slow"); $("ul li:eq("+showIndex+")").show("slow"); middleIndex--; } } }); }); </script>

JSFIDDLE

I want the animation on the right side to be as smooth as the animation on the left side. How can this be done? I think the reason It's slowing down on the right side is because it loops through all the LIs in order to find the max index but i'm not sure.

Tony Hinkle · Accepted Answer · 2015-11-03 19:12:48Z

1

Removing && visibleRows == 7 from the first if statement, or changing it to && visibleRows >= 7, addresses the issue.

When one of the panes is in transition, visibleRows is evaluating to 8 or more, which causes it to stop, and it doesn't continue until the mouse is moved again. If the code is allowed to run as the mouse moves right of center, the animations are queued up nicely.

edited Nov 3, 2015 at 19:12

answered Nov 3, 2015 at 19:07

Tony Hinkle

4,7627 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kjanko Over a year ago

Thanks a lot! You saved a lot of neurons today :)

kjanko Over a year ago

Would you know how to make it to look like It's moving from right to left or viceversa without fading? For e.g. is the left picture is displayed with 50% width the right one that appers would be displayed with 50% width (this would need to happen on the border of the ul width)

Tony Hinkle Over a year ago

You might be able to do that by putting the UL in a DIV that is only wide enough to show 7 of the LIs. Hide the horizontal scrollbar on the DIV so that it is invisible. Then use the mouseover event to scroll the DIV horizontally.

kjanko Over a year ago

Hmm, that's a good idea. I could fully rewrite my code in that case. I could have an axis of symmetry in the middle of the div and when you're hovering right form the axis, the event I coded above happens and viceversa. But how would I actually know which area I am hovering?

Tony Hinkle Over a year ago

I don't know off the top of my head. I'm not a real programmer. :)

Collectives™ on Stack Overflow

Smooth out a jQuery transition

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related