Как плавно анимировать цикл в jQuery

Я не знаю, как плавно использовать анимацию цикла.Как плавно анимировать цикл в jQuery

На данный момент анимация идет гладко до конца селектора (#horizontalSlider ul), а следующая анимация начинается с начала селектора (#horizontalSlider ul).

Как получить эффект, подобный виду, дублированному бесконечному селектору (#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

источник

2015-06-10 Prozack

http://atomicrobotdesign.com/blog/web-development/infinite-slider/ –

Измените функцию перемещения к этому -

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

источник

2015-06-10 08:26:36 lugreen

   <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>

мне нужно, чтобы все время анимации был dupclicate выше код до бесконечности. после последнего li, должен быть первым li

источник

2015-06-10 08:47:46 Prozack

http://output.jsbin.com/ufoceq/8/ -> effect like Это – Prozack

Как плавно анимировать цикл в jQuery

ответ

Смежные вопросы