how to smoothly animate a loop in jquery

Question

how to smoothly animate a loop in jquery

178 Views Asked by Prozack At 19 October 2024 at 19:41

I don't know, how to smoothly loop animation.

At the moment, the animation goes smoothly to end of selector (#horizontalSlider ul) and the next animation starts from the begin of selector(#horizontalSlider ul).

How to get effect like kind duplicated to endless selector(#horizontalSlider ul).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/pauseAnimation.js"></script>
<style>
    /*ALL DIV WRAPPER;*/

    html {
        margin: 0 auto;
        padding: 0;
    }

    #horizontalSlider {
        position: relative;
        overflow: hidden;
        width: 400px;
    }

    #horizontalSlider ul {
        position: relative;
        height: 180px;
        list-style: none;
        overflow: hidden;
        /*width: 1800px;*/
    }

    .left {
        float: left;
    }

    #horizontalSlider ul li {
       position: relative;
        display: block;
        float: left;
        /*width: 200px;*/
        /*border: 1px solid gold;*/
        opacity: 0.3;
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
    }

    #horizontalSlider ul li:hover {
        opacity: 1.0;
        /*filter: alpha(opacity=1);*/  
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
    }

    .all {
        margin: 0 auto;
        width: 550px;
    }
</style>

<script type="text/javascript">
var totalWidth = 0;
var numerOfChildlenElements = 0;

    function moveRight() {
        $('#horizontalSlider ul').css({right:0});

        $('#horizontalSlider ul').animate({right: totalWidth}, 15000, function () {
              moveRight();
        });
    }

    $(document).ready(function() {
        numerOfChildlenElements = $("ul").children().length;
        for(i = 0; i < numerOfChildlenElements; ++i)
            totalWidth += $("ul").children().eq(i).width();
        $('#horizontalSlider ul').css("width", totalWidth);

        $("#left").click(function(e){
            e.preventDefault();

        });

        $("#right").click(function(e){
            e.preventDefault();
        });

    moveRight();



        $('#horizontalSlider ul li').hover(function() {
          $('#horizontalSlider ul').pause();
        }, function() {
          $('#horizontalSlider ul').resume();
        });
});

</script>
</head>
<body>

    <div class="all">
        <button id="left" class="left">LEFT</button>
        <div id="horizontalSlider" class="left">
        <ul>
                <li>
                     <div><img src="http://th02.deviantart.net/fs71/150/f/2011/178/9/3/06272011___naruto_x_tayuya_by_dthegrimm-d3k6edx.jpg" alt="zdj1" /></div>
                     <div>Praesent at vestibulum sapien</div>
                </li>
                <li>
                    <div><img src="http://th01.deviantart.net/fs44/150/f/2009/068/6/3/new_naruto_7_class_by_unhai.jpg" alt="zdj2" /></div>
                    <div>Nullam ut varius ante.</div>
                </li>
                <li>
                    <div><img src="http://www.creetor.com/games/images/naruto-ninja-world-storm-2.png" alt="zdj3" /></div>
                    <div>P3t at vestibulum sapien,</div>
                </li>
                <li>
                    <div><img src="http://th06.deviantart.net/fs70/150/i/2012/352/0/6/naruto_uzumaki_vs_son_goku_by_pinkycute03-d5oej1r.jpg" alt="zdj4" /></div>
                    <div>Orange akcesoria still</div>
                </li>
            </ul>
        </div>
        <button id="right" class="right">RIGHT</button>
    </div>    
</body>
</html>

JSFIDDLE DEMO

Original Q&A

There are 2 best solutions below

**Prozack** · Answer 1

                <li>
                     <div><img src="http://th02.deviantart.net/fs71/150/f/2011/178/9/3/06272011___naruto_x_tayuya_by_dthegrimm-d3k6edx.jpg" alt="zdj1" /></div>
                     <div>Praesent at vestibulum sapien</div>
                </li>
                <li>
                    <div><img src="http://th01.deviantart.net/fs44/150/f/2009/068/6/3/new_naruto_7_class_by_unhai.jpg" alt="zdj2" /></div>
                    <div>Nullam ut varius ante.</div>
                </li>
                <li>
                    <div><img src="http://www.creetor.com/games/images/naruto-ninja-world-storm-2.png" alt="zdj3" /></div>
                    <div>P3t at vestibulum sapien,</div>
                </li>
                <li>
                    <div><img src="http://th06.deviantart.net/fs70/150/i/2012/352/0/6/naruto_uzumaki_vs_son_goku_by_pinkycute03-d5oej1r.jpg" alt="zdj4" /></div>
                    <div>Orange akcesoria still</div>
                </li>

I need that the whole time animation was dupclicate above code to infinity. after last li, should be the first li

**lugreen** · Answer 2

Change your move function to this -

function moveRight() {
    $('#horizontalSlider ul').css({left: '400px'}, 0, 'linear');
    $('#horizontalSlider ul').animate({left: -totalWidth}, 15000, 'linear', function () {
          moveRight();
    });
}

how to smoothly animate a loop in jquery

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-ANIMATE

Trending Questions

Popular # Hahtags

Popular Questions