CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
kjanko
kjanko

Reputation: 592

Smooth out a jQuery transition

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.

Upvotes: 0

Views: 27

Answers (1)

Tony Hinkle
Tony Hinkle

Reputation: 4742

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.

Upvotes: 1

Related Questions