如何继续方法 .animate 而不是在鼠标离开时重新启动它？答案

【问题标题】：How to continue the method .animate instead of restarting it on mouse leave?如何继续方法 .animate 而不是在鼠标离开时重新启动它？
【发布时间】：2015-07-23 06:06:46
【问题描述】：

我有这个旋转木马。 Mouseenter 停止和 mouseleave 重新启动方法。动画从一开始。关于如何在 mouseleave 上重新启动方法完成它的任何想法？

我的意思是，方法 .animate 现在转到 marginLeft -124 ......所以当你把鼠标放在动画停止时......到这里很酷，但是如果我释放鼠标，动画会从头开始重新开始，但我想要动画一直到最后……

“如果我把鼠标放在上面，该方法将停止，例如在左边距 -60...所以从这里我想继续到 0 而不是再次从 -124 重新开始”

我希望已经清楚了

提前致谢

$(function() {
  var list = $('ul');
  var perro = $('.perro');
  
  function onAnimate() {		
    $('ul li:first-child').appendTo('ul');
    $('ul li:last-child').css('margin-Left', 0);
		    
    move();
  }
  
  function move() {
    $('ul li:first-child')
        .animate({ marginLeft: -124  }, 1500, onAnimate);
  }
  
  list.find('li:even').addClass('even');
  list.find('li:odd').addClass('odd');
  
  list.on('mouseenter', 'li', function() {
    $('ul li:first-child').stop();
  });
  
  list.on('mouseleave', move);
  
  move();
});

div { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}

#tomas {
	width: 600px;
	height: 200px;
	background-color: #000;
}

<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>

<body>
<div id="new-carousel">
    <ul>
        <li class="perro">Item #1</li>
        <li class="perro">Item #2</li>
        <li class="perro">Item #3</li>
        <li class="perro">Item #4</li>
        <li class="perro">Item #5</li>
        <li class="perro">Item #6</li>
        <li class="perro">Item #7</li>
        <li class="perro">Item #8</li>
        <li class="perro">Item #9</li>
        <li class="perro">Item #10</li>
        <li class="perro">Item #11</li>
        <li class="perro">Item #12</li>
    </ul>
</div>


</body>
</html>

【问题讨论】：

你用的是哪个轮播？
你在 sn-p 中看到的那个

标签： javascript jquery jquery-animate carousel

【解决方案1】：

我添加了一个名为重置的新函数

list.on('mouseleave', reset);

function reset(){

     perro.each(function(e){
         list.append($('#item'+e, list));
     });

    move();

}

DEMO

【讨论】：

谢谢队友，但不工作，鼠标离开后发生一些事情真的很奇怪......想法是继续.animate，不重新启动功能