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

How to continue the method .animate instead of restarting it on mouse leave?

本文关键字：鼠标 离开 重新启动 何继续 继续 方法 animate      更新时间：2023-09-26

我有这个旋转木马。鼠标进入停止，鼠标离开重新开始。我该怎么做，而不是重新启动方法在mouseleave完成它吗?

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

"如果我把鼠标放在上面，该方法将停止，例如在margin left -60…所以从这里开始，我想继续设置为0，而不是从-124重新启动"

我希望我已经说清楚了

Thanks in advance

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

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

list.on('mouseleave', reset);
function reset(){
     perro.each(function(e){
         list.append($('#item'+e, list));
     });
    move();
}
演示

相关文章：