Question

我有这个旋转木马。 Mouseenter stop和mouseleave restart方法。来自beggining的动画。有关如何在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>

Answer 1

我添加了一个名为reset

的新功能

list.on('mouseleave', reset);

function reset(){

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

    move();

}

DEMO

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

1 个答案: